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

注意，最好在背景图片后设置背景尺寸。

当背景图片重置或更新在其他地方（通过课程或ID）
时，您还需要重置它
从你的问题来看，我不太清楚我是否理解你的问题，但是如果使用渐变你有问题而不是没有它，你可以使用插入阴影代替：

＆＃13;
＆＃13;
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%; }
＆＃13;
＆＃13;
＆＃13;

或为bg：
设置背景大小

＆＃13;
＆＃13;
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%; }
＆＃13;
＆＃13;
＆＃13;

CSS背景图像和背景差异

2 个答案: