如何为背景图像添加透明度? (HTML + CSS)

问题描述 投票:1回答:2

晚上好!当涉及到HTML和CSS时,我没有发现这个确切的问题。我找不到与该主题有关的唯一问题。我才刚开始编程,所以请裸身。

-所以,我的CSS文件中有这些行:

body {
    background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}

-我如何透明地影响此图像?我找到了一个看起来像这样的“解决方案”:

img {
    opacity: 0.5
}

但是我真的不知道如何应用它。如果我仅将其写下来,则不会发生任何事情,因为我不知道如何将其连接到要使用的图像。

html css tags transparency
2个回答
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>

正文是您的背景,内容是您的文本和其他内容等。


0
投票

您可以利用rgba()属性的background功能并将其与url()功能结合使用。 RGBA除了具有opacity属性的性能外,还具有红色,绿色,蓝色的A代表“ Alpha”。值的范围从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')
}
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.