【问题标题】：Set size on background image with CSS?使用 CSS 设置背景图像的大小？
【发布时间】：2010-11-23 09:42:14
【问题描述】：

是否可以用 CSS 设置背景图片的大小？

我想做这样的事情：

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

但好像那样做是完全错误的……

【问题讨论】：

也许有可能。请参阅How To: Resizeable Background Image。

标签： css

【解决方案1】：

如果你想在同一个background 属性中设置background-size，你可以使用：

background:url(my-bg.png) no-repeat top center / 50px 50px;

【讨论】：

我无法测试，但可能。
我以为 ipad 无法识别速记背景@orlando-leite

【解决方案2】：

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

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}

【讨论】：

【解决方案3】：

你写过

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

但您只会看到背景，具体取决于容器的大小。

如果您有一个带有背景 url 的空容器，并且无论背景大小是什么，您都不会看到 bg.gif。

如果你将 continer 的大小设置为

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

结合上面写的代码，就可以看到bg.gif文件了。

【讨论】：

【解决方案4】：

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;

【讨论】：

【解决方案5】：

例如：
背景图片将始终适合容器大小（宽度为 100%，高度为 100 像素）。
跨浏览器 CSS：

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

【讨论】：

【解决方案6】：

CSS2

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

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

CSS3 _{^释放力量}

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

所有现代浏览器都支持此功能，因此除非您需要支持旧浏览器，否则这是实现此功能的方法。
_{支持的浏览器：}
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 值，它们为我们提供了前所未有的新控制能力。

圆形

您也可以将具有含义的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;
}

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

补充说明
如果您需要的大小是静态像素大小，那么物理调整实际图像的大小仍然是明智之举。这既是为了提高调整大小的质量（假设您的图像软件比浏览器做得更好），也是为了在原始图像大于显示的图像时节省带宽。

【讨论】：

请注意，iPad 和 iPhone 以及可能即将推出的其他高分辨率设备上的视网膜显示器也存在问题。这意味着可能值得使用 CSS 调整较大图像的大小，并使用多个 CSS 文件和其他技巧来提供特定图像。很好的介绍在这里：webmonkey.com/2012/03/…
这是目前最糟糕的解决方案，因为并非每个电子商务商店都会按照建议重新调整图像大小。在 2009 年，它很可能接近最佳选择，现在只需使用如下尺寸属性即可。

【解决方案7】：

不要太难，如果你不怕深入一点:)

有一个被遗忘的论点：

background-size: contain;

这不会像 cover 那样拉伸您的 background-image。它会一直拉伸，直到较长边达到外部容器的宽度或高度，从而保留图像。

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

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

^{- Source: W3 Schools}

【讨论】：

【解决方案8】：

你完全可以使用 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;
 }

这会将背景图像的大小调整为主体元素宽度的 100%，然后随着主体元素针对更小的分辨率重新调整大小，相应地重新调整背景大小。

示例如下：http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

【讨论】：

【解决方案9】：

只有 CSS 3 支持，

background-size: 200px 50px;

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

【讨论】：

不幸的是，人们仍在使用 ie8
2013年完结，IE lt 9还需要加background: url('resized_image.png')\9;
即使在 2017 年也是如此！
我也来自 2017 年，我们就是这样做的。

【解决方案10】：

您可以使用两个<div> 元素：

一个是容器（它是您最初想要的背景图像）。
第二个包含在里面。您将其大小设置为背景图片（或您希望显示的尺寸）。

然后将包含的 div 设置为定位absolute。这样它就不会干扰包含 div 中项目的正常流动。

它使您能够有效地使用精灵图像。

【讨论】：

【解决方案11】：

为了支持@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;
}

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

【讨论】：

【解决方案12】：

背景尺寸：200px 50px 将其更改为 100% 100% 它将根据 ul li 或 div 等内容标签的需要进行扩展...尝试过

【讨论】：

【解决方案13】：

我为按钮使用背景图像，但它只显示与文本相同大小的图像，即使我设置了宽度和高度。相反，我用&nbsp; 字符（不间断空格）填充我的文本。基本上，我会根据需要添加尽可能多的内容，直到出现所有按钮背景。所以我可能有这样的代码：

在样式表中：

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

在 HTML 文档中：

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

【讨论】：

另一种方法是将链接的大小设置为背景图片的大小。在样式表中（在上例中的 #v2menu-home 下）使用 display:block 并在那里设置高度和宽度。这确实有效。那么就不需要不间断的空格字符了。

【解决方案14】：

background-size 在 Chrome 4.1 中运行，但目前我无法在 Firefox 3.6 中运行。

【讨论】：

【解决方案15】：

您无法使用当前版本的 CSS (2.1) 设置背景图片的大小。

您只能设置：position、fix、image-url、repeat-mode 和 color。

【讨论】：

【解决方案16】：

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

background-size 属性是 CSS 3 的一部分，但它不适用于大多数浏览器。

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

【讨论】：

背景尺寸：100%；背景位置：中心； - 这适用于在我的 XP Home 上的虚拟机上运行的 IE6。
IE 6,7,8 不是“大多数浏览器”。
即使在 2013 年 - 虽然关于 IE6 的评论“IE6,7,8 不是'大多数浏览器'”可能部分正确；不幸的是，IE7 和 IE8 仍然占有相当大的市场份额。我发现做到这一点的最佳方法是将 Javascript 与modernizr（或其他标记“OLDIE”的方法）结合使用。

【解决方案17】：

只有嵌套的 div 才能跨浏览器兼容


      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>

【讨论】：

【解决方案18】：

不可能。背景总是尽可能大，但您可以使用background-repeat 阻止它重复。

background-repeat: no-repeat;

其次，背景不会进入盒子的margin-area，所以如果你想让背景只在盒子的实际内容上，你可以使用margin而不是padding。

第三，您可以控制背景图片的起始位置。默认情况下，它位于框的左上角，但您可以使用background-position 控制它，如下所示：

background-position: center top;

或许

background-position: 20px -14px;

CSS sprites 经常使用负定位。

【讨论】：

不，它没有我能做的那么大。它总是一样的大小，但我需要做得更大。
好吧，那是不可能的。在未来的 CSS 版本中可能会有这样做的选项，但那还有很长的路要走。
这个答案是错误的。 CSS3 具有 IE9+ 支持的 background-size 属性。
看一下时间戳。在 2009 年，背景尺寸在 WebKit 眼中只是昙花一现。如果需要，请随时更新它，但已经有很多其他答案描述背景大小。

CSS2

CSS3 释放力量

圆形

不要太难，如果你不怕深入一点:)

CSS3 _{^释放力量}