Javascript 使div不透明度像线性渐变一样变化
我希望divs不透明度在左、上、右或下方向减小，就像Javascript 使div不透明度像线性渐变一样变化,javascript,html,css,Javascript,Html,Css,我希望divs不透明度在左、上、右或下方向减小，就像线性渐变在背景图像中那样，但仅用于整个外观（而不仅仅是背景）。有什么办法吗 我尝试过用以下代码执行此操作： html <body> <div id="outer"> <div id="content"> <!-- content --> </div> <div id="inner">
线性渐变在背景图像中那样，但仅用于整个外观（而不仅仅是背景）。有什么办法吗
我尝试过用以下代码执行此操作：
html
<body>
<div id="outer">
<div id="content">
<!-- content -->
</div>
<div id="inner">
</div>
</div>
</body>
正如预期的那样，它对颜色的效果非常好，但现在我想插入一个图像作为身体的背景，显然它不会像这样工作，你们中的任何人会怎么做
编辑：
有些人将它标记为的副本，但它不同
我不是说让背景图像
在其上获得线性渐变，我是说让整个div的一部分像渐变一样消失。使用遮罩：
.mask {
-webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
mask-image: linear-gradient(to left, transparent 30%, black 100%);
}
可能的副本请检查这个@Ryan不，我不这么认为，我看到了那个；他们试图填满它，我试图清空它it@SifatHaque我也检查了这个，他们讨论了两种不同的背景，但我讨论了使不透明度随着div的宽度而减小。请将代码从小提琴移到实际问题。请看。
.mask {
-webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
mask-image: linear-gradient(to left, transparent 30%, black 100%);
}