我希望div的不透明度在linear-gradient中像background-image一样在左,上,右或下方向减小,但仅对于整个外观(而不仅仅是背景)。有什么办法吗?

我尝试使用以下代码进行操作:
html

<body>
    <div id="outer">
        <div id="content">
            <!-- content -->
        </div>
        <div id="inner">
        </div>
    </div>
</body>



的CSS

#outer {
    height: 500px;
    width: 500px;
    padding-left:20px;
}

#inner {
    position: absolute;
    height: 500px;
    width: 500px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
    z-index: 999;
}

#content {
    position: absolute;
    height: 500px;
    width: 500px;
}



不出所料,它确实可以很好地与颜色配合使用,但是现在我想插入一张图像作为身体的背景,显然它不能像这样工作,你们中的任何一个怎么做?

编辑:你们中的一些人将其标记为css gradient opacity slide image left to right color white的重复项,但这并不相同;我不是在说要使background-image在其上得到线性渐变,而是要在整体上做一部分div像渐变一样消失。

最佳答案

使用口罩:

.mask {
  -webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
  mask-image: linear-gradient(to left, transparent 30%, black 100%);
}

07-24 09:43
查看更多