背景大小：封面在任何浏览器中都不起作用

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

看起来像这样 is/was 只是您对 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% 表示，将图像在两个维度上拉伸到相应容器维度的 100%。如果图片和元素的宽高比不匹配，图片将是 distorted/squished.

然而，

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

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

这个类比让事情更清楚了......?

Answer 2

要在不裁剪的情况下调整 background-image 大小，它必须与 parent 或 header 成比例。如果您的 header 具有 16:9 比率，那么您的图像也必须如此。他们需要一起调整大小。但这似乎比它需要的更棘手。

替代方法是使用以下结构；

<header>
    <img />
    <nav></nav>
</header>

图像位于 header 内。导航（位于图像顶部）相对于 header.

绝对定位

这可能需要进一步 media-queries 来管理 font-sizes 和较小屏幕的导航列表项。

JS Fiddle

Answer 3

Bro 而不是使用背景图像：url ('x') no-repeat center center fixed;在你上面的备用我建议你这是格式.. background:url ('x') no-repeat center center fixed;因为 css 中的背景速记属性是我在消息中建议的。谢谢你再见 frnds

Answer 4

#header {
      
      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;
      width:100%  
      min-height: 100vh;

}

我已经在你的 header 部分添加了 2 行代码，这样你就可以解决你的问题

背景大小：封面在任何浏览器中都不起作用

Background-size: cover not working in any browser

css

browser

cover

background-image