背景图片：如果图片较小，如何填充整个div，反之亦然

78

我有三个问题：

当我尝试在较小尺寸的div中使用背景图像时，div仅显示图像的一部分。如何显示图像的全部或特定部分？
我的图片较小，想在更大的div中使用。但是不想使用重复功能。
CSS中有什么方法可以处理图像的不透明度？

css background-image opacity

— Aakash Sahai
source

125

调整图像大小以适合div大小。
使用CSS3，您可以执行以下操作：

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

您如何在网页中拉伸背景图像：

关于不透明度

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

或查看CSS图像不透明度/透明度

— 约西
source

但是这会造成负担，在服务器加载多个图像（这是类似，为v知道）..所以不使用多张图片，用一个形象和strechgñcollasping是一个更好的way..but DNT懂得它..

— Aakash Sahai

第1点和第2点不是解决此问题的方法。第一点是为了保持画面的长宽比，第二点似乎根本不起作用。使用CSS3，background-size属性可以解决此问题，直到我猜你还是得坚持一下

— 。.– Sondre

IE浏览器不支持此功能（bg-size）。要做什么？

— KarSho 2013年

82

要自动放大图像并覆盖整个div部分，而又不使任何部分不满，请使用：

background-size: cover;

— 瓦迪
source

2

此页面上的评论最少，对我而言，最大的好处。谢谢

— Ruslan Abuzant 2016年

1

不适用于我，但我的div位于<table>内<tr>内的<th>内。不知道那是为什么

— 吗

您可以为示例创建一个jsfiddle吗？因此我们可以为您提供帮助

— Ouadie '16

22

这对我来说很完美

background-repeat: no-repeat;
background-size: 100% 100%;

— Dnyaneshwar Harer
source

这一张既适合宽度又适合高度的背景图像，正是需要的。

— 鲍里斯·加富罗夫

9

尝试下面的代码段，我之前已经尝试过：

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}

— 贝尼娅·埃斯迈利安（Behnia Esmailian）
source

欢迎使用Stack Overflow！尽管此答案可能是正确且有用的，但如果您在其中包含一些解释以说明它如何帮助解决问题，则最好使用该答案。如果发生更改（可能不相关）导致它停止工作，并且用户需要了解它曾经如何工作，那么这在将来特别有用。

— 凯文·布朗

8

而不是给出background-size:100%;
我们可以给出的background-size:contain;
选项，请查看以下内容：http : //www.css3.info/preview/background-size/

— vivekj011
source

6

这将像魅力一样工作。

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;

— 贾坦塔·比斯瓦斯（Jayanta Biswas）
source

谢谢。在专门寻找那个。几年前做过，忘记了。

— Alex Rogachevsky

包含不包括整个div。因此，掩盖似乎是op寻找的东西。

— 腹板

0

我同意yossi的示例，将图像拉伸到适合div的位置，但方式略有不同（没有背景图像，因为在CSS 2.1中有点不灵活）。显示完整图片：

<div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

使用背景位置显示图像的一部分：

#yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

与（1）的第一部分相同，图像会缩放到div，因此更大或更小都会起作用
和yossi一样。

— 巴兹
source

呃，我的帖子格式不起作用？我使用了工具栏图标... :(

— Bazzz 2011年

我更早尝试过，并且也尝试过..如果图像大小为100px 100px，而div为400px 400px，那么它固定在顶部角落。 Safari的最新浏览器

— Aakash Sahai

这是一个示例：jsfiddle.net/9mawE/1 div的宽度为150px。Google徽标的宽度超过150像素，但会缩小以适合div。Google Earth图标的宽度小于150px，并且已放大以适合150px的div。Background-size在IE 8中不起作用，因为它仍然不受CSS 3的支持。

— 巴兹（Bazzz）2011年