CSS 带背景图片的对角线部分分隔符

Question

我正在尝试使用变换在页面的各个部分之间创建对角线。它与背景颜色完美搭配，请参阅：http://jsfiddle.net/jme11/D9M2L/ but not with a background image: 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;
}

Answer 1

您的背景图片设置在您的 div 上 class="diagonal"。您的旋转是在这个 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');
}

Answer 2

如果替换 http://placekitten.com/200/300 with an url to an image, se this JSFiddle，您的 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;
}

CSS 带背景图片的对角线部分分隔符

CSS diagonal section divider with background image

html

css

css-transforms