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

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 与重复结合使用：

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

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

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

---

只有 CSS 3 支持，

background-size: 200px 50px;

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

---

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

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

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

---

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

background-repeat: no-repeat;

其次，背景不会进入盒子的边距区域，所以如果你想让背景只出现在盒子的实际内容上，你可以使用边距而不是填充。

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

background-position: center top;

也许

background-position: 20px -14px;

CSS sprites 经常使用负定位。

---

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

有一个被遗忘的论点：

background-size: contain;

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

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

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

^{- Source: W3 Schools}

---

background-size: 200px 50px 将其更改为 100% 100% 它将根据 ul li 或 div 等内容标签的需要进行缩放...试过了

---

为了支持@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 中）

---

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

---

只需嵌套 div 即可跨浏览器兼容

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

---

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

一个是容器（它是您最初希望背景图像出现的容器）。

第二个包含在里面。您将其大小设置为背景图像的大小（或您希望出现的大小）。

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

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

---

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;

---

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

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

---

你写

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 文件。

---

background-size 在 Chrome 4.1 中运行，但到目前为止我无法使其在 Firefox 3.6 中运行。

---

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

在样式表中：

#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 -->

---

例如：背景图像将始终适合容器大小（宽度 100% 和高度 100px）。跨浏览器 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;

}

---

这可以在 CSS3 中使用 background-size 完成

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

---

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

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

---