CSS 不透明度从上到下渐变没有颜色?
CSS Opacity Gradient Top to Bottom Without Color?
我想让我的 div 具有渐变不透明度。我能找到的是如何用颜色设置它。但是如果我不想有任何颜色怎么办,这样里面的元素就会向底部透明:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
您可以在 ::after
伪元素上创建一个从透明渐变为白色(或您想要使用的任何背景颜色)的渐变,并将其覆盖在 div 中的内容上:
.g{
width: 50vw;
height: 50vh;
position: relative;
display:flex;
align-items: flex-end;
}
.g::after{
content: "";
width: 100%;
height: 100%;
position:absolute;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
<div class="g">
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum
</div>
这就是mask
的目的
.box {
font-size:35px;
display:inline-block;
-webkit-mask:linear-gradient(#fff,transparent);
mask:linear-gradient(#fff,transparent);
}
<div class="box">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:red;">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:green;">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>
我想让我的 div 具有渐变不透明度。我能找到的是如何用颜色设置它。但是如果我不想有任何颜色怎么办,这样里面的元素就会向底部透明:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
您可以在 ::after
伪元素上创建一个从透明渐变为白色(或您想要使用的任何背景颜色)的渐变,并将其覆盖在 div 中的内容上:
.g{
width: 50vw;
height: 50vh;
position: relative;
display:flex;
align-items: flex-end;
}
.g::after{
content: "";
width: 100%;
height: 100%;
position:absolute;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
<div class="g">
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum
</div>
这就是mask
.box {
font-size:35px;
display:inline-block;
-webkit-mask:linear-gradient(#fff,transparent);
mask:linear-gradient(#fff,transparent);
}
<div class="box">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:red;">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:green;">
text<br>text<br>text<br>text<br>text<br>text<br>
</div>