Tim*_* T. 2 html javascript css
我希望 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 渐变不透明幻灯片图像从左到右颜色白色的重复，但它不一样；
我不是在谈论让其获得background-image线性渐变，而是让整个 div 的一部分像渐变一样消失。
小智 7
使用面膜：
.mask {
-webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
mask-image: linear-gradient(to left, transparent 30%, black 100%);
}