如何设置不透明度值,例如在线性渐变背景图像上设置opacity: 0.6?
opacity: 0.6
background-image: linear-gradient(to left, #00497a -26.48%,#003366 73.52%);
谢谢!
2lpgd9681#
将hexidecimal color-codes替换为rgba color-codes:
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>
jobtbby32#
使用RGBa值:
linear-gradient(to left, rgba(0,73,122,0.6) 26.48%, rgba(0,51,102,0.6) 73.52%);
cgvd09ve3#
试试这个:
background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url('/image/r.jpg');
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
4条答案
按热度按时间2lpgd9681#
将
hexidecimal color-codes
替换为rgba color-codes
:jobtbby32#
使用RGBa值:
cgvd09ve3#
试试这个:
jv4diomz4#
若要设置背景中图片本身的透明度而不应用颜色,可以使用background mask属性
您可以在这里阅读更多https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image