css 图片切背景透明

Question

我需要从 CMS 获取图像并在下一节中使用，并与促销文本（灰色 space）并排使用，但我不知道如何创建下一个效果：

如您所见，正方形从左侧顶部开始，然后向下移动一点点直到右侧，在左侧我们有我需要的反之亦然的效果示例。

备注：

来自 CMS 的原始图像是一个正方形，我需要尽可能使用 css 创建 "cut" 效果
解决方案需要兼容ie9+, ff, chrome.

Answer 1

我怀疑它是纯 CSS 完成的，它更有可能使用具有透明度的背景图像来实现该效果。我见过很多情况下使用的剪切效果。

但是，我会创建一个CSS版本并且post它在这里，因为它非常可能。

这是一个使用我刚刚编写的 CSS3 属性 skew 的示例：

http://jsfiddle.net/35s9dk25/7/

可以根据您的需要进行调整。

如果有帮助，请将此答案标记为正确。

Answer 2

因为您需要一张背景图片，而且我假设您希望文本漂浮在灰色部分上，所以您需要做一些不同于@seanlevan 提议的事情。

出于演示目的，我添加了一些背景图片和文字。

/* IE9+ http://caniuse.com/#feat=transforms2d */

* {
    box-sizing: border-box;
}
html, body {
    min-height: 100%;
}
body {
    background-image: url(http://lorempixel.com/output/city-q-c-1200-800-9.jpg);
    background-size: cover;
}


.wrapper {
    padding-top:50px;
    height: 400px;
    overflow: hidden;
    width: 100%;
    max-width: 750px;
    min-width: 500px;
    margin:0 auto;
}
.skew-container {
    position: relative;
    height: 500px;
    overflow: hidden;
    -webkit-transform: skewY(2.5deg);
    -moz-transform: skewY(2.5deg);
    -ms-transform: skewY(2.5deg);
    -o-transform: skewY(2.5deg);
    transform: skewY(2.5deg);
}
.skew-container:before {
    content:'';
    position: absolute;
    right: 50%;
    top: 0;
    left:0;
    bottom:0;
    background-image: url(http://lorempixel.com/output/food-q-c-800-600-3.jpg);
    background-size: cover;
    background-position: bottom left;
    z-index: -1;
}
.skew-container:after {
    content:'';
    position: absolute;
    left: 50%;
    top: 0;
    right:0;
    bottom:0;
    background-color: #ccc;
    z-index: -1;
}
.text {
    width: 50%;
    float: left;
    padding: 2em;
    margin-left: 50%;
    -webkit-transform: skewY(-2.5deg);
    -moz-transform: skewY(-2.5deg);
    -ms-transform: skewY(-2.5deg);
    -o-transform: skewY(-2.5deg);
    transform: skewY(-2.5deg);
}

<div class="wrapper">
    <div class="skew-container">
        <div class="text">
            <h2>San Fran Flatbread &amp; Sauce</h2>
            <p>Bacon ipsum dolor amet picanha pariatur in jowl. Prosciutto tongue cupidatat ex. Rump swine sausage shank ribeye ex minim consequat magna chuck meatball kevin pork chop in. Pariatur minim bacon tongue, sausage ut veniam cupim short loin.</p>
            <a href="#">Get the recipe</a>
        </div>
    </div>
</div>

所以基本上这是如何工作的，倾斜容器有一个固定的高度，比它的包装容器稍大。通过向包装器添加一些顶部填充，将其溢出设置为隐藏，您可以将倾斜容器向下推，以便隐藏 div 的底部，使其底部平坦。

接下来，我使用了两个伪元素来填充容器，但如果您想更灵活地使用内联样式动态添加图像，则不必将它们设为伪元素(example here ).其中每一个都是父倾斜容器宽度的 50%。通过绝对定位，它们可以并排放置。 z-index 为 -1 时，它们将位于文本后面。

最后，您想通过使用负偏斜值来取消文本 div 的偏斜。我给文本容器 50% 的宽度，将其向左浮动并使用 margin-left 的 50% 来偏移它，使其适合右侧的灰色区域。

css 图片切背景透明

css image cut background transparent

css

transparent

background-image