我试图创建一条线,使用渐变,它对每一侧都是透明的,类似于:Image - A vertical, bright line, that fades into the background on all sides
我已经有点接近于重现这一点.Image - The same except for some minor differences
在我最好的try 中,如上所述,我作弊并将边设置为背景色:
.outer-div:before {
content: "";
background:
/* sides same color as background */
linear-gradient(to right, rgba(100, 100, 90, 1), rgba(0, 0, 0, 0), rgba(100, 100, 90, 1)),
linear-gradient(rgba(100, 100, 90, 1) 0, rgba(0, 0, 0, 0) 20% 80%, rgba(100, 100, 90, 1) 100%),
/* the actual color */
/*rgba(149, 147, 132, 1);*/
/* changed to white so it's easier to see */
rgba(255, 255, 255, 1);
float: left;
/* again, changed from 5 to 20px so it's easier to see */
width: /*5px;*/ 20px;
height: 112px;
}
<div class="outer-div">
A div with some text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text
</div>
这是我能想到的最好的了.
有没有人知道如何让两边真正透明?