具有不透明度并覆盖整个屏幕的背景图像

Question

一直在玩弄 CSS，但出于某种原因，我无法让图像覆盖整个屏幕。我设法将 opacity 调低，但图像不会覆盖屏幕。

<div class="backgroundImage">
    <img src="Image/BackgroundImage.jpg">
</div>

.backgroundImage{
    opacity: 0.4;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

然而，如果我使用下面的代码，我可以让它覆盖整个屏幕，但 opacity 不会下降。因此，出于某种原因，它无法在 div 上运行。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

您可以组合多个背景图像并将它们堆叠在一起。但是没有办法控制它们的不透明度。

    .backgroundImage {
    background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
    background-position: center bottom, left top;
    -webkit-background-size: 80px 60px, cover;
    -moz-background-size: 80px 60px, cover;
    -o-background-size: 80px 60px, cover;
    background-size: 80px 60px, cover;
    background-repeat: repeat-x, no-repeat;
    width: 100%;
    height: 100vh;
}

在您的情况下，img 标签未关闭。它应该看起来像这样 <img src="Image.jpg">.

此外，您不能使用 background-size: 指定 img 的维度，您应该使用 width: 和 height:。

Answer 2

这是一个演示：https://jsfiddle.net/a1wvdpwc/17/ 我想这就是你想要的效果？

就给背景div宽高100%，位置固定。然后给它一个非常低的Z-index，这样它就留在最后面。然后，您还需要将图像的高度和宽度设置为 100%，以便它填满视口。（在演示中我使用了 vh 和 vw；这意味着 viewport-width 和 viewport-height，作为百分比。）

该演示也在 scss 中，但唯一的区别是放置在 backgroundImage 样式中的 css Img 使用后代选择器，因此它以所有 Img 元素为目标div.backgroundImage。我已经把编译后的 css 放在这个答案中。

也很抱歉没有缩进。我在 phone 上输入了它。我会在几个小时内用更简洁的版本更新它。

html是：

<div class="backgroundImage">
      <img src="http://lorempixel.com/image_output/city-q-c-640-480-6.jpg" />
</div>
<div class="content">
    Content here
</div>

css是：

.backgroundImage {
    Position:fixed;
    Top: 0;
    Bottom: 0;
    Width: 100vh;
    Height: 100vh;
    Opacity: 0.25;
    Z-index: -5000;
}

.backgroundImage img {
    width:100vw;
    height: 100vh;
}
.content {
    padding: 30px;
}

另外我忘了补充，（据我所知）这种方法在语义上不太好，但如果你使用它应该不会太糟糕。

Answer 3

您可以使用 :before 或 :after 的 CSS 个伪元素，并为其设置背景图像 + opacity。您可以将所有内容设置为 height:100%，或者直接在 div 上使用 height:100vh 以使其覆盖整个视口高度。

Jsfiddle Example

body {
  margin: 0;
}
.container {
  position: relative;
  height: 100vh;
}
.container:before {
  background: url("https://unsplash.it/500") center / cover;
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
  opacity: 0.5;
}

<div class="container">Yes!</div>

具有不透明度并覆盖整个屏幕的背景图像

Background image with opacity and cover whole screen

html

css

background-image