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

我有一张

图像

。我必须为同一张图像的不同部分提供不同级别的

不透明度。看这张图片，它告诉我们更多


注意：这是一张示例图像，仅用于显示示例

这可能吗？？？
我认为最好的方法是为这个用例提供一个准备好的图像。不过，这里有一个简单CSS的可能性：


CSS:

HTML:

只有在源图像本身中设置不同的不透明度级别时，才有可能。使用.png文件。或者你可以把它切成薄片，然后把元素排成一行，然后通过这种方式控制不透明度，把它们“缝合”在一起。
.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;
}

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