CSS2

Question

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

我想做类似的事情：

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

但这样做似乎完全错误......

Answer 1

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与重复一起使用的含义{<1}}：

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

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

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

Answer 2

只有CSS 3支持，

background-size: 200px 50px;

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

Answer 3

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

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

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

Answer 4

不可能。背景将始终尽可能大，但您可以阻止它使用background-repeat重复自身。

background-repeat: no-repeat;

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

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

background-position: center top;

或者

background-position: 20px -14px;

CSS sprites使用了负面定位。

Answer 5

不要太难，如果你不害怕更深入一点：）

有一个被遗忘的参数：

background-size: contain;

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

修改：还有-webkit-background-size和-moz-background-size。

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

^{- Source: W3 Schools}

Answer 6

background-size：200px 50px 将其更改为100％100％，它将根据内容标签的需求进行扩展，如ul li或div ...尝试

Answer 7

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

这会将背景图像的大小调整为body元素宽度的100％，然后相应地重新调整背景大小，因为body元素会针对较小的分辨率重新调整大小。

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

Answer 8

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

Answer 9

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

一个是容器（它是你原本想要的容器背景图片出现在。）
第二个包含在内。您将其大小设置为大小背景图片（或您希望出现的尺寸）。

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

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

Answer 10

让嵌套的div与浏览器兼容

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

Answer 11

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

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

Answer 12

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;

Answer 13

你写过

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

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

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

如果将汇合点的大小设置为

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

结合您上面编写的代码，您将能够看到bg.gif文件。

Answer 14

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

在样式表中：

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

Answer 15

background-size正在使用Chrome 4.1，但到目前为止，我无法在Firefox 3.6中使用它。

Answer 16

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

}

Answer 17

这可以在CSS3中使用background-size

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

Answer 18

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

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

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

18 个答案:

CSS2

CSS3 _{^释放权力}

圆

不要太难，如果你不害怕更深入一点：）

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

18 个答案:

CSS2

CSS3 释放权力

圆

不要太难，如果你不害怕更深入一点：）

CSS3 _{^释放权力}