如何使用CSS设置背景图像的大小？

Question

是否可以使用CSS设置背景图片的尺寸？

我想要做像这样的事情：

background: url('bg.gif') top repeat-y;
background-size: 490px;

但是似乎这样做是完全错误的...

- Johan

---

也许是可能的。请参阅 *如何：可调整大小的背景图像*。 - Ricardo de la Vega

Answer 1

CSS2

如果需要将图像变大，必须在图像编辑器中编辑图像本身。

如果使用img标签，可以更改大小，但如果您需要将图像用作其他内容的背景（且不会像您想要的那样重复），那么这不会给您所需的结果...

CSS3 _{^释放力量}

使用background-size在CSS3中可以实现这一点。

所有现代浏览器都支持此功能，因此除非需要支持旧浏览器，否则应该采用此方法。
_{支持的浏览器：}
^{Mozilla Firefox 4.0+（Gecko 2.0+），Microsoft Internet Explorer 9.0+，Opera 10.0+，Safari 4.1+（webkit 532）和Chrome 3.0+。}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

特别是我喜欢cover和contain值，它们给了我们以前没有的控制力。

Round

您还可以使用background-size:round，它与repeat组合在一起具有意义：

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

这将调整图像宽度，使其在背景定位区域内完整显示。

---

补充说明
如果你需要的尺寸是固定像素大小，仍然明智地将实际图像进行物理缩放。一方面可以提高调整大小的质量（因为您的图像软件会比浏览器更好地完成此项工作），另一方面可以节省带宽，如果原始图像大于所需显示的大小。

- awe

---

请注意，在iPad、iPhone和可能出现的其他高分辨率设备上，视网膜显示也是一个问题。这意味着使用CSS调整较大的图像大小，并使用多个CSS文件和其他技巧来服务特定的图像可能是值得的。这里有一个很好的介绍：http://www.webmonkey.com/2012/03/what-the-new-ipads-retina-display-means-for-web-developers/ - Leo

现在来说，这是最糟糕的解决方案，因为并不是每个电子商务店都会按建议重新调整图像大小。在2009年，这很可能是最好的选择，现在只需使用以下大小属性即可。 - ShaunOReilly

Answer 2

只有CSS 3支持该功能，

background-size: 200px 50px;

但我会编辑图片本身，这样用户需要加载的量就会减少，并且它可能看起来比没有抗锯齿的缩小图像更好。

- Maertz

---

很遗憾，人们仍在使用IE8。 - Dean_Wilson

2013年即将结束，仍需为IE lt 9添加background: url('resized_image.png')\9;。 - skobaljic

这是即使在2017年也是正确的方法！ - Francisco Ochoa

我也来自2017年，这就是我们的做法。 - Ska

Answer 3

如果你的用户只使用Opera 9.5+，Safari 3+，Internet Explorer 9+和Firefox 3.6+，那么答案是肯定的。否则，不行。 background-size属性是CSS 3的一部分，但它在大多数浏览器上无法工作。

为了您的目的，只需使实际图像更大即可。

- Christopher Tokar

---

背景大小：100％; 背景位置：中心; - 这在运行在我的XP Home虚拟机上的IE6中有效。 - InnateDev

IE 6、7、8 不是“大多数浏览器”。 - Mahmood Dehghan

即使在2013年，“IE6,7,8不是‘大多数浏览器’”这一评论在IE6方面可能部分正确；但不幸的是，IE7和IE8仍然拥有相当大的市场份额。我发现最好的方法是使用Javascript与modernizr（或其他标记“OLDIE”的方式）相结合来解决这个问题。 - AndrewPK

Answer 4

不可能。 背景图像会尽可能地扩展以填满整个背景，但你可以使用background-repeat属性来阻止它重复显示。

background-repeat: no-repeat;

第二，背景不会进入框的边距区域，因此如果你想要背景只存在于框的实际内容中，你可以使用margin代替padding。

第三，你可以控制背景图像的起始位置。默认情况下是框的左上角，但你可以使用background-position来控制，像这样：

background-position: center top;

或者可能

background-position: 20px -14px;

负定位在CSS精灵中经常被使用。

- mikl

---

不，它并不像我想象的那么大。它总是同样的大小，但是我需要让它变得更大。 - Johan

那是不可能的。在未来的CSS版本中可能会有这样的选项，但那还有很长的路要走。 - mikl

这个答案是错误的。CSS3有background-size属性，支持IE9+。 - Downpour046

看一下时间戳。在2009年，background-size只是WebKit的一个想法。如果你想更新它，可以随意，但已经有很多其他答案描述了background-size。 - mikl

Answer 5

如果你不害怕深入一点，这并不太难 :)

有一个被遗忘的参数：

background-size: contain;

使用这种方法不会像使用cover一样拉伸您的background-image。它将一直拉伸直到更长的边缘达到外部容器的宽度或高度，从而保留图像。

编辑：还有-webkit-background-size和-moz-background-size。

background-size属性在IE9+、Firefox 4+、Opera、Chrome和Safari 5+中受支持。

^{-来源: W3 Schools}

- kaiser

Answer 6

支持@tetra的答案，我想指出如果图像是SVG格式，则不需要调整实际图像大小。由于SVG文件只是XML，因此可以在XML中指定其应显示的任何大小。但是，如果您在不同地方使用相同的SVG图像并需要不同大小，则使用background-size非常有帮助。 SVG文件本来就比光栅图像小，在CSS中即时调整大小非常有用，我没有意识到它会带来任何性能损失，并且质量几乎没有损失。这里是一个快速的例子：

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

（注：这在我的OS X 10.7中适用于Firefox 8、Safari 5.1和Chrome 16.0.912.63）

- SunSparc

Answer 7

你完全可以通过CSS3实现：

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

这将使背景图片的大小与body元素的宽度调整到100％，并随着较小分辨率下body元素的调整而自动重置背景大小。

这里有一个示例：http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

- Mike Sinkula

Answer 8

将background-size: 200px 50px改为100% 100%，它将根据内容标签（如ul li或div）的需求进行缩放...已尝试。

- mihai

Answer 9

put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;

- Shwetha S.H

Answer 10

为了跨浏览器兼容性，只需使用嵌套的div即可

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            在此处放置内容
         </div>
      </div>
   

- Cornelius Lamb