我的CSS文件中有以下几行:
body {
background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}
我该如何以透明性影响此图像?我找到了一个看起来像这样的“解决方案”:
img {
opacity: 0.5
}
但是我真的不知道如何应用它。如果我只写下来,什么都不会发生,因为我不知道如何将它连接到我要使用的图像。
答案 0 :(得分:1)
您只需按如下所示应用它;
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="content">Hey!</h1>
</body>
</html>
正文是您的背景,内容是您的文本和其他内容等。
答案 1 :(得分:0)
您可以利用rgba()
属性的background
函数并将其与url()
函数结合使用。 RGBA除具有红opacity
属性的红,绿,蓝外,还有“ Alpha”的A。值范围从0到1。在背景图像中使用RGBA的技巧是在rgba()
中使用两个并行的linear-gradient()
函数。由于rgba()
返回一个颜色值,因此它可以用作线性渐变中的两个颜色停止点...尽管从技术上讲它们不是颜色停止点,因为从两个类似的颜色值不会发生过渡。朴实,但简单又实用。
body {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')
}