用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的一部分，但它不能在大多数浏览器上工作。为了您的目的，只需使实际的图像更大。