2

有没有办法给 background-image 设置透明度?

 2 years ago
source link: https://www.geekjc.com/post/61bc4181a73a295970f1a2b0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
关注本站公众号获取最新福利

有没有办法给 background-image 设置透明度?

时间: 12/17/2021作者: 一颗小草浏览量: 9

现在是没法改图片本身的透明度,该图片以 background-image 写在 css 里,不知道有没有办法给他设置透明度?

1. 方式一

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

2. 方式二

只要把用到的 background 属性都写成一条就可以了,如下

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150') no-repeat 0% 20%/ cover;
关注下面的标签,发现更多相似的文章

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK