我正在尝试使用变换在页面的各个部分之间创建对 Angular 线。它与背景颜色完美搭配,请参阅:http://jsfiddle.net/jme11/D9M2L/但没有背景图片:http://jsfiddle.net/D9M2L/224/这是为什么?
section.diagonal {
background-image: url('image.jpg');
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
最佳答案
如果您替换 http://placekitten.com/200/300,您的 JSFiddle 几乎可以正常工作带有图像的 url,请使用此 JSFiddle .我对 HTML 和 CSS 进行了一些更改。
HTML:
<header>
<p>Header</p>
</header>
<section class="diagonal">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</section>
<footer>
<p>Footer</p>
</footer>
CSS:
body {
background-color: #000;
margin: 0px;
}
p {
color: white;
}
section {
position: relative;
color: #fff;
text-align: center;
}
section:before {
position: absolute;
content:'';
}
footer {
position: relative;
color: #fff;
text-align: center;
}
footer:before {
position: absolute;
content:'';
}
footer.diagonal {
background: black;
}
.diagonal {
z-index: 1;
padding: 3em;
}
.diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 100%;
background-image: url('http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
关于html - 带有背景图片的 CSS 对 Angular 线部分分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33783833/