背景图像覆盖文字甚至不提供背景图像答案

【问题标题】：background image overlay with text not even giving the background-image背景图像覆盖文字甚至不提供背景图像
【发布时间】：2022-12-10 00:22:58
【问题描述】：

我试图在我的背景上从上到下获得线性渐变，但我最初获得的背景图像现在消失了。但是，如果我使用普通的 background-image 属性，我就能正确获取图像。

    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;

它应该提供没有渐变的适当背景，但图像消失了。有人请帮忙！

【问题讨论】：

你做了什么调试？使用浏览器的开发工具检查工具来检查到底应用了哪些 CSS。您将在后台设置中看到警告。您有语法错误，括号错误，您已将 url 包含在线性渐变中。

标签： html css

【解决方案1】：

请试试这个。它会正常工作。

background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    opacity:0.5;

【讨论】：

【解决方案2】：

使用不透明度：0.1；我希望这能解决你的问题

【讨论】：

【解决方案3】：

检查这个。

.main { 
  
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    background-image: linear-gradient(166deg, rgba(0,0,0,0.6),rgb(17 29 251 / 90%)),url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

&lt;div class="main"&gt; &lt;/div&gt;

【讨论】：

【解决方案4】：

使用以下语法：

background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
opacity:0.1;

【讨论】：