css 线性梯度背景图像不透明度

vbkedwbf  于 2022-12-24  发布在  其他
关注(0)|答案(4)|浏览(175)

如何设置不透明度值,例如在线性渐变背景图像上设置opacity: 0.6

background-image: linear-gradient(to left, #00497a -26.48%,#003366 73.52%);

谢谢!

2lpgd968

2lpgd9681#

hexidecimal color-codes替换为rgba color-codes

div {
width: 150px;
height: 150px;
background-image: linear-gradient(to left, rgba(0,67,116,0.6) -26.48%, rgba(0,51,102,0.6) 73.52%);
}
<div>
</div>
jobtbby3

jobtbby32#

使用RGBa值:

linear-gradient(to left, rgba(0,73,122,0.6) 26.48%, rgba(0,51,102,0.6) 73.52%);
cgvd09ve

cgvd09ve3#

试试这个:

background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url('/image/r.jpg');
jv4diomz

jv4diomz4#

若要设置背景中图片本身的透明度而不应用颜色,可以使用background mask属性

background-image: url('path/to/your/image.jpg');
-webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 55%);
mask-image: linear-gradient(to bottom, transparent 40%, black 75%);

您可以在这里阅读更多https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image

相关问题