Question

嘿，所有CSS3的知识者，我对background-image有一点问题，我需要得到像image这样的结果。但我遇到了像http://bagrattam.com/stackoverflow/bg-skew/bg.html这样的背景问题。

如果你帮助我解决这个问题，我将非常感激。

HTML：

    <header>
        <div class="container">
            <h6>Production</h6>
            <h1>This is the heading</h1>
            <h5>This is the subheading</h5>
        </div>

        <div class="angleLayer">
            <div class="blogProfile">
                <figure class="imgFrame">
                    <img src="" width="66" height="66" alt="">
                </figure>
                <div class="profileInfo">
                    <div class="name">Name Surname</div>
                    <time class="date" datetime="2015-04-28">April 08, 2005</time>
                </div>
            </div>
        </div>
    </header>

CSS：

    header {
        background-image: url("http://bagrattam.com/website/images/other/paint.png");
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        position: relative;
    }
    header:after {
        background: inherit;
        backface-visibility: hidden;
        transform: skewY(-12deg);
        transform-origin: 100% 50% 0;
        content: " ";
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
    }
    .angleLayer {
        transform: skewY(-12deg);
        transform-origin: 100% 0 0;
        -webkit-backface-visibility: hidden;
        z-index: 2;
        position: relative;
    }
    .blogProfile {
        transform: skewY(12deg);
        -webkit-backface-visibility: hidden;
        position: absolute;
        top: -33px; 
        left: 0;
        right: 0;
    }

Answer 1

尝试使用clip-path属性

        header {
        background: url("http://bagrattam.com/website/images/other/paint.png") no-repeat;
        background-size: cover;
        text-align: center;
        height: 351px;
        position: relative;
    }
    header:after {
        -webkit-clip-path: polygon(0% 100%, 100% 100%, 101% 62%);
        clip-path: polygon(0% 100%, 100% 100%, 101% 62%);
        background: #fff;
        content: " ";
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
    }

https://jsfiddle.net/riju2142/p58c6ybv/

祝你好运

背景图像与歪斜

1 个答案: