我尝试使用变换在页面的各个部分之间创建对角线。它与背景颜色完美配合,请参阅: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;
}
答案 0 :(得分:1)
你的JSFiddle几乎正常工作,如果你用图片的网址替换http://placekitten.com/200/300,请查看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;
}
答案 1 :(得分:0)
您的背景图片设置在class="diagonal"
的div上。
您的旋转是在此div伪元素before
上进行的。
如果您想要旋转背景图像,您应该在伪元素上添加背景图像并将其从div中删除。
如下所示:
section.diagonal {
}
.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-image: url('image.jpg');
}