在同一图像的不同部分提供不同的不透明度

Question

我有image。并且我必须在同一图像的不同部分提供不同级别的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>