我正在尝试在 HTML/CSS 中重新创建此布局(跨浏览器兼容回 IE9):
基本上,它是一条跨越视口(viewport)宽度的对 Angular 线,将两个背景图案分开。它将具有固定的高度,但它应该动态拉伸(stretch)到其容器的整个宽度。
我想不出使用纯 CSS 实现此目的的方法,所以我的下一个想法是使用 SVG。这对纯色来说并不难:
http://codepen.io/troywarr/pen/EPXVRV?editors=110
但是,我对如何将重复背景图案应用到 SVG 形状感到困惑。它需要与 <section>
中的背景图案对齐s 上下,并且背景填充不应随形状的尺寸缩放,否则会显得扭曲。
在 CSS 中应用一些背景图片,我越来越接近了:
http://codepen.io/troywarr/pen/OMgyoE?editors=110
我只需要 SVG 填充部分的深色背景图案。
使用更明显的图像作为测试,我能够将其拉伸(stretch)到我的 <polyline>
的尺寸:
http://codepen.io/troywarr/pen/BjZoEq?editors=110
但是,有些拉伸(stretch)是我不想要的。我需要平铺我的图案,或者至少不扭曲它的原始尺寸(这样我可以在需要时使用它的大样本),即使形状本身具有流动宽度。我为 <pattern>
尝试了几种不同的属性值组合元素,但我还没有找到任何按预期工作的东西,即使遵循相关答案的一些指导也是如此:
- Fill SVG path element with a background-image
- Add a background image (.png) to a SVG circle shape
- Fill SVG path element with a background image without tiling or scaling
有什么建议吗?我也很想听听有关非 SVG 方法的任何想法。谢谢!
更新:
抱歉,我刚刚意识到我的 CodePen 示例中的背景模式不起作用。我已经使用有效的图片 URL 更新了它们。
最佳答案
考虑到你需要:
- 相对于视口(viewport)的倾斜宽度
- 形状的固定高度
有一种简单的 CSS 方法可以与 border 和 viewport units 一起使用:
body,html{padding:0;margin:0;}
div{
border-bottom:50px solid rgba(0,0,0,.8);
border-top: 50px solid transparent;
background-image:url('http://i.imgur.com/iUhGezx.png');
}
div:before{
content:'';
display:block;
border-right:100vw solid rgba(0,0,0,.8);
border-top:50px solid transparent;
}
<div></div>
该图案使用背景图像属性重复。倾斜是用伪元素上的边框制作的。
父 div 的边框只是为了在倾斜周围形成顶部和底部空间。
视口(viewport)相关单位 (vw) 受 IE9 及以上版本支持(有关详细信息,请参阅 canIuse)。
更新:
如果您需要为两个区域设置单独的背景图像,则有 2 种可能的 CSS 方法:
带转换: 受 IE9 及以上 vendor prefixes 支持.倾斜始终具有相同的 Angular 。
body,
html {
padding: 0;
margin: 0;
overflow:hideden;
}
div{
width:100%;height:150px;
position:absolute;
}
.top {
padding-top:50px;
background: #fff url('http://i.imgur.com/dzFT6wB.png');
}
.bot {
transform-origin:100% 0;
transform:rotate(-5deg);
overflow:hidden;
top:50px; right:0;
width:110%;
}
.bot:after{
content:'';
position:absolute;
right:0;top:0;
width:100%;height:100%;
transform-origin:inherit;
transform:rotate(5deg) translatez(0px);
background: #262729 url('http://i.imgur.com/LxTJ685.png');
}
<div class="top"></div>
<div class="bot"></div>
随着 clip-path property : 虽然它有 low browser support ,它可以让你更好地控制倾斜 Angular :
body,html{padding:0;margin:0;}
div{
position:relative;
height:150px;
}
div:before, div:after{
content:'';
width:100%; height:100%;
position:absolute;
}
div:before{
background: url('http://i.imgur.com/dzFT6wB.png');
}
div:after{
-webkit-clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
background:#262729 url('http://i.imgur.com/LxTJ685.png');
}
<div></div>
关于html - 流体宽度 SVG 形状上的重复图案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34715926/