css - 为同一图像的不同部分提供不同的不透明度

Question

我有一张图片。而且我必须为同一图像的不同部分提供不同级别的 opacity。图像的部分可以是我们的选择。看看图片，它告诉我们更多信息。

注意:这是一张示例图片，仅用于展示示例。

这可能吗？？

Answer 1

我认为最好的方法是为这个用例提供准备好的图像。尽管如此，这里有一个使用纯 CSS 的可能性:

http://jsfiddle.net/Sur7D/1/

CSS:

.image1
{
    background-image: url("http://lorempixel.com/400/200/");
    background-attachment: fixed;
    background-position: center center;
    background-size:contain;
}

.split-image
{
    height: 200px;
}

.split-image > div
{
    height: inherit;
    width: 33.333%;
    float:left;
    transform: skewX(-25deg)
}

.split-image > div:nth-child(1){
    opacity: 0.8;
}

.split-image > div:nth-child(2){
    opacity: 0.5;
}
.split-image > div:nth-child(3){
    opacity: 1;
}

HTML:

<div class="split-image">
    <div class="image1"></div>
    <div class="image1"></div>
    <div class="image1"></div>
</div>