css - 背景尺寸 : cover not working in any browser

Question

我有以下 HTML 代码:

 <header id="header">
      <h1><span id="titlu-pagina">Watercolors</span></h1>

          <ul>
              <li><a href="#">About Me</a></li>
              <li><a href="#">Where To Find Me</a></li>
              <li><a href="#">The Blog</a></li>
         </ul>
</header>

和相应的 CSS 之一:

  #header {
          height: 800px;
          text-align: center;
          border-bottom: 1px solid black;
          background-color: #734C8F;
          background-image: url('10.jpg');
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
          background-size: cover !important;
    }

我正在尝试将图像设置为页眉的背景，但由于某种原因，该图像未以全尺寸显示。我已经尝试过低分辨率图像，但仍然有一些部分是从中剪切下来的。如果我调整浏览器的大小，图像会缩放并最终达到其完整大小。

如果我将代码更改为

 background-image: url('10.jpg') no-repeat center center fixed;

图像根本不显示。我究竟做错了什么？我已经在所有浏览器中尝试了代码，但结果是一样的。

Answer 1

看起来这只是您对 background-size: cover 实际作用的误解。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size :

[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

(“当图像和容器具有不同的尺寸” 应该是“具有不同的纵横比”——因为如果它们没有不同的尺寸，但图像和元素的宽度和高度将完全相同相同，那么我们就不需要首先应用背景大小。)

如果您希望图像被“压缩”而不是被裁剪——那么使用background-size: 100% 100%。

Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.

background-size: 100% 100% 表示将图像在两个维度上拉伸(stretch)到相应容器维度的 100%。如果图像和元素的纵横比不匹配，图像将被扭曲/挤压。

cover 旨在将图像缩放到尽可能大，同时保持它的纵横比。

可以把它想象成在电视屏幕上看电影。电影宽高比和电视宽高比通常不同(或者至少习惯于使用旧电视。)现在通常您希望看到图片中发生的所有事情，而不会错过“侧面”发生的任何事情它的。因此，电影以覆盖屏幕整个宽度(或高度)的方式缩放，并且顶部和底部(或左/右)出现黑条 - 从而保持电影的纵横比 -因为你不想看一部扭曲的电影，当汽车轮胎是椭圆形并且人们的脸不自然地宽或长时，这看起来很奇怪。

这个比喻让事情更清楚了......？