我希望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%);
}