最多投票342下投票最喜爱的
139

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

我想做一些像：

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

但是，这样做似乎是完全错误的

 
分享改善这个问题
 
   
也许这是可能的 请参阅如何：调整大小的背景图像。 评论时间  70 年01月01日原作者： Ricardo de la Vega
最多投票562下投票接受

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

这将调整图像宽度，使其在背景定位区域中适合多次。

附加说明
如果您需要的尺寸是静态像素尺寸，那么在实际调整实际图像大小方面仍然很聪明。这既是提高调整大小的质量（考虑到您的图像软件比浏览器更好），并且如果原始图像大于显示内容，则节省带宽。

分享改善这个答案
 
6 
请注意，还有iPad和iPhone上的视网膜显示问题，以及其他高分辨率设备。这意味着它可能值得使用CSS调整大图像大小，并使用多个CSS文件和其他技巧来提供特定的图像。很好的介绍到这里：webmonkey.com/2012/03/... -  Leo Apr 8 '12 at 13:22
   
这是目前最糟糕的解决方案，因为并不是每个电子商务店都会根据建议重新调整图像大小。在2009年，它很可能接近最佳选择，现在只需使用如下所示的大小属性。 -  Shaunoreilly 七月14 '12在0:43
24 
@ShaunOReilly：并不是每一个网络应用程序都是一个电子商务店... -  敬畏 10月1日'12在10:26
1 
一个字.brilliant -  Ritabrata Gautam 8月9日13日12时 31分
 
最多选票323向下投票

只有CSS 3支持，

background-size: 200px 50px;

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

分享改善这个答案
 
40 
我们在2011年还是什么？人们需要提出这个答案。 -  samvermette 四月19 '11 at 0:59
25 
+1这是要走的路，现在是2012年;） -  奥斯汀·亨利 1月2日，12日，8:27
5 
+1进步。 -  利亚姆 二月十四日十二时二十二分
31 
不幸的是，人们仍然在0:09使用ie8 -  Dean_Wilson
15 
耻辱微软这是可怕的浏览器 -  Mahmoodvcs 十二月18 '12在10:49
投票21票

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

该背景大小的属性是CSS 3的一部分，但它不会在大多数浏览器。

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

分享改善这个答案
 
4 
IE 9也支持它。 -  the_drow 七月11 '11在21:09
1 
背景大小：100％; 背景位置：中心; - 这在IE6上运行在XP Home上的虚拟机上。 -  InnateDev 2011年7月19日 16:53
5 
IE 6,7,8不是“大多数浏览器”。 -  Mahmoodvcs 十二月十八日'12在10:52
1 
即使在2013年 - 虽然评论“IE6,7,8不是”大多数浏览器“”可能部分是关于IE6; IE7和IE8的市场份额还是挺不错的。我发现这样做的最好方法是将Javascript与modernizr（或其他标记“OLDIE”的方法）结合使用。 -  AndrewPK Jan 22 '13 at 15:01
投票16票

不可能的。背景总是会尽可能大的，但你可以阻止它重复background-repeat。

background-repeat: no-repeat;

其次，背景没有进入一个框的边缘区域，所以如果你想让背景只是一个框的实际内容，你可以使用边距而不是填充。

第三，您可以控制背景图像开始的位置。默认情况下，它是一个框的左上角，但您可以background-position像这样控制：

background-position: center top;

也许

background-position: 20px -14px;

负面定位使用了很多CSS精灵。

分享改善这个答案
 
   
不，它不如我能做的那么大。它总是相同的大小，但我需要做的更大。 评论时间  70 年01月01日原作者：
   
那是不可能的。在未来版本的CSS中可能会有这样的选择，但这还有很长的路要走。 -  mikl 8月27日09时14:15
   
这个答案是错的。CSS3具有IE9 +支持的background-size属性。 -  Downpour046 Apr 1 '14 at 19:39
3 
看看时间戳。在2009年，背景大小只是WebKit眼中的闪光。随意更新它，如果你想，但已经有很多其他答案描述背景大小。 -  mikl 4月2日'14在20:40
投票12票

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

有一个被遗忘的论点：

background-size: contain;

这不会像你background-image那样伸展你的cover。它将延伸直到较长的一侧到达外部容器的宽度或高度，因此保持图像。

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

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

- 资料来源：W3学校

分享改善这个答案
 
投票3投票

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

分享改善这个答案
 
投票2投票

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

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
分享改善这个答案
 
投票2投票

背景大小：200px 50px更改为100％100％，它将扩展内容标签的需求，如ul li或div ...尝试了

分享改善这个答案
 
投票2投票

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

分享改善这个答案
 
投票2投票

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

  • 一个是容器（这是你最初想要的背景图像出现的容器）。

  • 第二个包含在其中。您将其大小设置为背景图像的大小（或您希望显示的大小）。

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

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

分享改善这个答案
 
向上投1向下票

您不能使用当前版本的CSS（2.1）设置背景图像的大小。

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

分享改善这个答案
 
向上投1向下票
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;
分享改善这个答案
 
向上投1向下票

你写了

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

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

如果你有一个空的容器与背景URL和任何背景大小，你将看不到bg.gif。

如果你设置大小的大小

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

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

分享改善这个答案
 
达票0向下票

background-size 在Chrome 4.1中工作，但到目前为止，我无法使其在Firefox 3.6中正常工作。

分享改善这个答案
 
达票0向下票

我使用背景图像的按钮，但它只显示与文本大小相同的图像，即使我设置宽度和高度。相反，我用&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 -->
分享改善这个答案
 
2 
另一种方法是将链接的大小设置为背景图像的大小。在样式表中，（在上面的例子中的#vmenu-home下）使用display：block并设置高度和宽度。这实际上是有效的。不需要不间断的空格字符。 -  马丁·汤普森 12月9日12时34分
达票0向下票

例如：
背景图像将始终适合容器大小（宽度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;

}

分享改善这个答案
 
达票0向下票

这可以在CSS3中使用背景大小

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}
分享改善这个答案
 
达票0向下票

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

background:url(my-bg.png) no-repeat top center / 50px 50px;
分享改善这个答案
 

保护由哈希姆Qolami 10月11日在'14 23:29

感谢您对此问题的关注。因为它吸引了低质量或垃圾邮件的答案，必须删除，所以现在发布答案需要在这个网站10个声望（协会奖金不算）。 

你想回答这些未回答的问题之一吗？

不是你要找的答案？浏览其他问题标记  


来自  http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css