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

Question

用CSS设置背景图像的大小？是否可以使用CSS设置背景图像的大小？我想做这样的事情：background: url('bg.gif') top repeat-y;background-size: 490px;但这样做似乎是完全错误的.

Answer 1

CSS 2

如果需要使图像更大，则必须在图像编辑器中编辑图像本身。

如果您使用IMG标记，您可以更改大小，但如果您需要图像作为其他内容的背景(并且它不会像您似乎想要的那样重复自己)，这将不会给您提供想要的结果.

CSS 3_{^释放力量}

这在CSS 3中是有可能的background-size.

所有现代浏览器都支持这一点，所以除非您需要支持旧浏览器，否则这就是实现它的方法。
_{受支持的浏览器：}
^{Mozilla Firefox 4.0+(Gecko 2.0+)、Microsoft InternetExplorer 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给我们新的控制力的价值观，这是我们以前没有过的。

圆

您也可以使用background-size: round与重复相结合有意义的：

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

这将调整图像的宽度，使其适合在背景定位区域的全部次数。

---

附加说明
如果您需要的大小是静态像素大小，那么物理地调整实际图像的大小仍然是明智的。这不仅是为了提高调整大小的质量(考虑到您的图像软件比浏览器做得更好)，而且如果原始图像大于显示内容，则可以节省带宽。

Answer 2

只有CSS 3支持，

background-size: 200px 50px;

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

Answer 3

如果您的用户只使用Opera 9.5+、Safari 3+、InternetExplorer 9+和Firefox 3.6+，那么答案是肯定的。否则不行。

这个背景尺寸属性是CSS 3的一部分，但它不能在大多数浏览器上工作。

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