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

看起来这只是对你最终的误解，背景大小：封面实际上是什么。

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

[cover]尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像被剪裁左/右或上/下。

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

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

我可以问你什么时候通常建议使用100％100％背景尺寸以及什么时候使用更好：盖？我不清楚他们在覆盖容器方面做了两件不同的事情。

background-size: 100% 100%表示将两个尺寸的图像拉伸到相应容器尺寸的100％。如果图像和元素的宽高比不匹配，图像将会扭曲/压缩。

然而，

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

想想就像在电视屏幕上看电影一样。影院宽高比和电视纵横比通常不同（或者至少习惯于旧电视。）现在通常你想要看到图片中发生的所有事情，并且不要错过任何“两侧”发生的事情。它的。因此，电影按照覆盖屏幕整个宽度（或高度）的方式进行缩放，并在顶部和底部（或左/右）获得黑条 - 从而保留电影的纵横比 - 因为你不想看电影被扭曲，当汽车轮胎是椭圆形而人们有不自然的宽脸或长脸时，这看起来很奇怪。

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

Answer 2

要使背景图像调整大小而不进行裁剪，它必须与父级或标题成比例。如果您的标题具有16：9的比例，那么您的图像也必须如此。他们需要一起调整大小。但这似乎比它需要的更棘手。

替代方案是使用以下结构;

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

图像位于标题内。导航（位于图像顶部）相对于标题绝对定位。

这可能需要一些其他媒体查询来管理较小屏幕的字体大小和导航列表项。

JS Fiddle

Answer 3

#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;

}

通过在标题部分添加两行代码，您可以解决问题

Answer 4

Bro而不是使用background-image：url（'x'）无重复中心固定;在你上面的替代我建议你这是格式..背景：网址（'x'）无重复中心固定;因为css中的背景短手属性是我在我的消息中建议的..你再见了

背景大小：无法在任何浏览器中使用

4 个答案: