CSS background-image 和背景的区别

Question

我的背景有以下代码，因此图像有点不透明。

div#home {
    background-size: cover;
    color: #404040;
    background-image: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg);
}

但是我希望它被修复。我尝试使用 background-attachment 但这在 iOS Safari 上不起作用，所以我正在寻找替代方案并遇到：

background: url(/img.png) no-repeat center center fixed

我正在尝试实现它，因此它适用于我的不透明度有点像：

div#home {
        background-size: cover;
        color: #404040;
        background: linear-gradient(to bottom, rgba(0,0,0, 0.45) 0%,rgba(0,0,0, 0.45) 100%), url(/images/sp-bg.jpg) no-repeat center center fixed;
    }

但是，这使我的图像放大了很多。

该网站的访问地址为：http://www.shivampaw.com/

谢谢

Answer 1

注意，最好在 background-image之后设置background-size。

当背景图像在其他地方重置或更新（通过类或 id）时，您还必须重置它

---

根据您的问题，我不太确定我是否理解您的问题，但是如果使用渐变时您遇到问题而不是没有问题，您可以改用嵌入阴影：

html {
  height:100%;
  background:url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
  background-size:cover;
  /*box-shadow:inset 0 0 0 3000px rgba(0,0,0,0.225);*/
  box-shadow:inset 50vh 100vw rgba(0,0,0,0.45);
}
body {/* make html scroll */
  height:200%;
}

或为两个背景设置背景大小：

html {
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%) 0 0 scroll no-repeat, url(http://www.shivampaw.com/images/sp-bg.jpg) center center fixed;
  background-size:cover, cover;
}
body {
  /* make html scroll */
  height: 200%;
}

Answer 2

只需在末尾添加background-size: cover;（在背景设置后），您的代码应该可以正常工作。

默认情况下，您拥有background-size:initial。 initial 关键字用于将 CSS 属性设置为其默认值。 cover - 将背景图像缩放到尽可能大，使背景区域完全被背景图像覆盖。