用CSS设置背景图像的大小?

是否有可能设置CSS的背景图像的大小?

我想做一些事情:

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

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

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

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


附加说明
如果您需要的大小是静态像素大小,则调整实际图像的大小仍然很明智。 这是为了提高resize的质量(假设您的图像软件比浏览器做得更好),并且在原始图像大于显示内容的情况下节省带宽。

只有CSS 3支持,

 background-size: 200px 50px; 

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

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

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

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

不可能 。 背景总是尽可能大,但是可以阻止background-repeat

 background-repeat: no-repeat; 

其次,背景不会进入框的边缘区域,所以如果你想让背景只在框的实际内容上,你可以使用margin而不是padding。

第三,你可以控制背景图像的起始位置。 默认情况下它是框的左上angular,但是你可以用background-position来控制它,就像这样:

 background-position: center top; 

也许

 background-position: 20px -14px; 

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

不要太难,如果你不想深入一点:)

有一个被遗忘的论点:

 background-size: contain; 

这不会background-image cover那样延伸你的background-image 。 它会延伸,直到长边达到外部容器的宽度或高度,因此保留图像。

编辑:还有-webkit-background-size-moz-background-size

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

– 来源:W3学校

你完全可以用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%,然后将相应地重新调整背景大小,因为正文元素重新resize以适应较小的分辨率。

这里是例子: 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 style="background: url('bg.gif') top repeat-y;min-width:490px;"> Put content here </div> </div> 

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)

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

  • 一个是一个容器(这是你最初想要的背景图片出现在的那个容器)。

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

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

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

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

您只能设置: positionfiximage-urlrepeat-modecolor

 put the below code in the body of you css file background-image: URL('..http://img.dovov.comwave-green-plain-colour.jpg') ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100px; 

你写了

 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属性中设置background-size ,你可以使用use:

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

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

我使用button的背景图像,但它只显示与文本大小相同的图像,即使我设置宽度和高度。 相反,我使用&nbsp; 字符(不间断空格)。 基本上,我需要打耳光,直到出现所有的button背景。 所以我可能有这样的代码:

在样式表中:

 #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/defaulthttp://img.dovov.combackground.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/defaulthttp://img.dovov.combackground.jpg", sizingMethod = 'scale'); background-size: 100% 100px; 

}

这是可以做到CSS3与背景大小

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