背景尺寸:封面无法在任何浏览器中使用 [英] Background-size: cover not working in any browser

问题描述

我有以下HTML代码:

I have the following HTML code:

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

我正在尝试将图像设置为标题的背景，但是由于某种原因，图像无法以完整尺寸显示.我尝试了低分辨率图像，但仍然从中切出了一些部分.如果我调整浏览器的大小，图像会缩放，最后它会变到其完整大小.

I am trying to set up an image as a background for the header but for some reason the image is not displayed in its full size. I've tried low res images and still, some parts are cut from it. If I resize the browser the image scales and in the end it gets to its full size.

如果我将代码更改为

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

图像完全不显示.我究竟做错了什么?我已经在所有浏览器中尝试过该代码，但是结果是相同的.

the image doesn't display at all. What am I doing wrong? I've tried the code in all browser but the result is the same.

推荐答案

在您看来，这仅仅是对背景尺寸:封面实际起作用的误解.

Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.

https://developer.mozilla.org/zh-美国/docs/Web/CSS/background-size :

[cover]尽可能缩放图像并保持图像的宽高比(图像不会被压缩).该图像覆盖"了容器的整个宽度或高度.当图像和容器的尺寸不同时，图像将被剪切(左/右或上/下).

[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.)

("When the image and container have different dimensions" should rather be "have different aspect ratios" – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)

如果想要图像被压扁"而不是被剪裁，请使用background-size: 100% 100%.

If you want the image to get "squished" instead of clipped – then use background-size: 100% 100%.

我可以问您，通常什么时候建议使用100％100％背景大小，什么时候最好使用:cover?对于我来说，目前还不清楚他们在覆盖容器方面如何做两种不同的事情.

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％.如果图像和元素的宽高比不匹配，则图像会失真/变形.

background-size: 100% 100% means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.

cover旨在将图像缩放到尽可能大，同时保持的宽高比.

cover however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.

想起来就像在电视屏幕上看电影一样.电影的纵横比和电视的纵横比通常会有所不同(或者至少在较旧的电视上是这样).现在，通常您希望查看图片中发生的所有情况，而不会错过侧面"发生的任何情况的.因此，电影的缩放比例应使其覆盖屏幕的整个宽度(或高度)，并且顶部和底部(或左侧/右侧)会出现黑条–从而保持了电影的长宽比–因为您不想看扭曲的电影，所以当汽车轮胎为椭圆形并且人们的脸庞不自然或宽大时，这看起来就很奇怪.

Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens "on the sides" of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.

这个比喻使事情变得更清楚……?

That analogy make things clearer …?

这篇关于背景尺寸:封面无法在任何浏览器中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！