CSS 背景图像和背景差异

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-size: cover;（设置背景后），您的代码应该可以正常工作。

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

Answer 2

注意，最好设置background-size after background-image.

当 background-image 在其他地方 reset 或 updated 时（通过 class 或 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%;
}

CSS 背景图像和背景差异

CSS background-image and background differences

html

css

background

background-image

ios