使用 CSS 在背景图像上设置大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1341358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set size on background image with CSS?
提问by Johan
Is it possible to set the size of the background image with CSS?
是否可以使用 CSS 设置背景图像的大小？
I want to do something like:
我想做类似的事情：
background: url('bg.gif') top repeat-y;
background-size: 490px;
But it seems it's totally wrong to do it like that...
但这样做似乎完全错误......
回答by awe
CSS2
CSS2
If you need to make the image bigger, you must edit the image itself in an image editor.
如果您需要将图像放大，则必须在图像编辑器中编辑图像本身。
If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...
如果您使用 img 标签，您可以更改大小，但是如果您需要图像作为其他内容的背景（并且它不会像您想要的那样重复自己），那将不会给您想要的结果......
CSS3 unleash the powers
CSS3释放力量
This is possible to do in CSS3 with background-size.
这可以在 CSS3 中使用background-size.
All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
Supported browsers:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.
所有现代浏览器都支持这一点，所以除非您需要支持旧浏览器，否则这是这样做的方法。
支持的浏览器：
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;
}
In particular, I like the coverand containvalues that gives us new power of control that we didn't have before.
特别是，我喜欢cover和contain价值观，它赋予我们以前没有的新控制权。
Round
圆形的
You can also use background-size: roundthat have a meaning in combination with repeat:
您还可以background-size: round将具有含义的 that 与 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;
}
This will adjust the image width so it fits a whole number of times in the background positioning area.
这将调整图像宽度，使其适合背景定位区域的整数次。
Additional note
If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.
附加说明
如果您需要的大小是静态像素大小，则物理调整实际图像的大小仍然是明智之举。这既是为了提高调整大小的质量（假设您的图像软件比浏览器做得更好），又是为了在原始图像大于要显示的图像时节省带宽。
回答by Maertz
Only CSS 3 supports that,
只有 CSS 3 支持，
background-size: 200px 50px;
But I would edit the image itself, so that the user needs to load less, and it might look better than a shrunken image without antialiasing.
但我会编辑图像本身，这样用户需要加载的更少，并且它可能看起来比没有抗锯齿的缩小图像更好。
回答by Christopher Tokar
If your users use only Opera 9.5+, Safari 3+, Internet Explorer 9+ and Firefox 3.6+ then the answer is yes. Otherwise, no.
如果您的用户仅使用 Opera 9.5+、Safari 3+、Internet Explorer 9+ 和 Firefox 3.6+，那么答案是肯定的。否则，没有。
The background-sizeproperty is part of CSS 3, but it won't work on most browsers.
该背景大小的属性是CSS 3的一部分，但它不会工作在大多数浏览器。
For your purposes just make the actual image larger.
出于您的目的，只需将实际图像放大即可。
回答by mikl
Not possible. The background will always be as large as it can be, but you can stop it from repeating itself with background-repeat.
不可能。背景将始终尽可能大，但您可以使用background-repeat.
background-repeat: no-repeat;
Secondly, the background does not go into margin-area of a box, so if you want to have the background only be on the actual contents of a box, you can use margin instead of padding.
其次，背景不会进入盒子的边距区域，所以如果你想让背景只在盒子的实际内容上，你可以使用边距代替填充。
Thirdly, you can control where the background image starts. By default it's the top left corner of a box, but you can control that with background-position, like this:
第三，您可以控制背景图像的开始位置。默认情况下，它位于框的左上角，但您可以使用 来控制它background-position，如下所示：
background-position: center top;
or perhaps
也许
background-position: 20px -14px;
Negative positioning is used a lot with CSS sprites.
CSS 精灵经常使用负定位。
回答by kaiser
Not too hard, if you're not afraid of going a little more in depth :)
不太难，如果你不怕深入一点：)
There's one forgottenargument:
有一个被遗忘的论点：
background-size: contain;
This won't stretch your background-imageas it would do with cover. It would stretch until the longer side reaches the width or height of the outer container and therefore preserving the image.
这不会background-image像使用cover. 它会一直拉伸，直到长边达到外部容器的宽度或高度，从而保留图像。
Edit: There's also -webkit-background-sizeand -moz-background-size.
编辑：还有-webkit-background-size和-moz-background-size。
The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 支持 background-size 属性。
回答by Mike Sinkula
You totally can with CSS3:
你完全可以使用 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;
}
This will size a background image to 100% of the width of the body element and will then re-size the background accordingly as the body element re-sizes for smaller resolutions.
这会将背景图像的大小调整为 body 元素宽度的 100%，然后随着 body 元素为更小的分辨率重新调整大小，将相应地重新调整背景大小。
Here is the example: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
这是示例：http: //www.sccc.premiumdw.com/examples/resize-background-images-with-css/
回答by mihai
background-size: 200px 50px change it to 100% 100% and it will scale on the needs of the content tag like ul li or div... tried it
background-size: 200px 50px 将其更改为 100% 100% 它将根据内容标签的需要进行缩放，例如 ul li 或 div ... 尝试过
回答by SunSparc
In support of the answer that @tetra gave, I want to point out that if the image is an SVG, then resizing the actual image is not necessary.
为了支持@tetra 给出的答案，我想指出，如果图像是 SVG，则不需要调整实际图像的大小。
Since an SVG file is just XML you can specify whatever size you want it to appear within the XML.
由于 SVG 文件只是 XML，因此您可以指定希望它在 XML 中显示的任何大小。
However, if you are using the same SVG image in different places and need it to be different sizes, then using background-sizeis very helpful. SVG files are inherently smaller than raster images anyway and resizing on the fly with CSS can be very helpful without any performance cost that I am aware of, and certainly little to no loss of quality.
但是，如果您在不同的地方使用相同的 SVG 图像并且需要它的大小不同，那么使用background-size是非常有帮助的。无论如何，SVG 文件本质上比光栅图像小，并且使用 CSS 即时调整大小非常有帮助，而且我知道没有任何性能成本，而且质量几乎没有损失。
Here is a quick example:
这是一个快速示例：
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}
(Note: this works for me in OS X 10.7 with Firefox 8, Safari 5.1, and Chrome 16.0.912.63)
（注意：这适用于 OS X 10.7 和 Firefox 8、Safari 5.1 和 Chrome 16.0.912.63）
回答by Cornelius Lamb
Just have nested divs to be cross browser compatible
只需嵌套 div 即可跨浏览器兼容
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
回答by Ben Shomer
You can use two <div>elements:
您可以使用两个<div>元素：
One is a container (it is the one which you originally wanted the background image to appear at).
The second one is contained within. You set its size to the size of the background image (or the size you wish to be appearing).
一个是容器（它是您最初希望背景图像出现的容器）。
第二个被包含在里面。您将其大小设置为背景图像的大小（或您希望显示的大小）。
The contained div is then set to be positioned absolute. This way it does not interfere with the normal flow of items in the containing div.
然后将包含的 div 设置为定位absolute。这样它就不会干扰包含 div 中项目的正常流动。
It enables you to use sprite images efficiently.
它使您能够有效地使用精灵图像。
