带背景图像的CSS对角线分隔线 [英] CSS diagonal section divider with background image
本文介绍了带背景图像的CSS对角线分隔线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用变换在页面各部分之间创建对角线。它与背景色完美搭配,请参见: http://jsfiddle.net/jme11/D9M2L/ 但没有背景图片: http://jsfiddle.net/D9M2L/224/ 这是为什么?
I'm trying to create diagonal lines between sections of my page using transforms. It works perfectly with a background colour, see: http://jsfiddle.net/jme11/D9M2L/ but not with a background image: http://jsfiddle.net/D9M2L/224/ Why is this?
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;
}
推荐答案
您的JSFiddle即将运行,如果您将 http://placekitten.com/200/300 替换为图片的网址, JSFiddle 。我对HTML和CSS进行了一些更改。
Your JSFiddle is almost working, if you replace http://placekitten.com/200/300 with an url to an image, se this JSFiddle. I made some changes to the HTML and 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;
}
这篇关于带背景图像的CSS对角线分隔线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文