背景图片：如何在图像较小或较大时填充整个div

Question

我有三个问题：

1. 当我尝试在一个较小的div中使用背景图像时，div只显示了图像的一部分。如何显示完整的或特定部分的图像？

2. 我有一个较小的图像，我想在一个更大的div中使用它。但是不想使用重复功能。

3. CSS中是否有任何方法来操作图像的不透明度？

- Aakash Sahai

Answer 1

调整图片大小以适应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图像透明度/透明度

- yossi

---

但是这样会给服务器增加负担，加载多个相似的图片（就像我们知道的那样）...所以，不要使用多个图片，使用一张图片并拉伸和折叠是更好的方式。但是不知道如何做到这一点。 - Aakash Sahai

点1和点2都不是解决这个问题的方法。第一点是为了保持图片的宽高比，第二点似乎根本不起作用。使用CSS3中的background-size属性可以解决这个问题，但在那之前，你只能使用一些hack方法来解决了。 - Sondre

IE不支持(bg-size)。该怎么办？ - KarSho

Answer 2

要自动放大图像并覆盖整个div部分而不留下任何未填充的部分，请使用：

background-size: cover;

- Ouadie

---

在这个页面上，最小的评论对我来说有着最大的好处。谢谢。 - Ruslan Abuzant

不起作用，但我的 div 在 <table> 中的 <tr> 中的 <th> 中。不知道这是否是原因。 - user1709076

请问您能否为您的示例创建一个JSFiddle？这样我们就可以帮助您了。 - Ouadie

Answer 3

这对我来说完美地起作用了

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

- Dnyaneshwar Harer

---

这个适合背景图片的宽度和高度，正好符合要求。 - Boris Gafurov

Answer 4

试用下面的代码片段，我之前已经亲自试过：

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

- Behnia Esmailian

---

欢迎来到Stack Overflow！虽然这个答案可能是正确和有用的，但最好还是附上一些解释，以说明它如何帮助解决问题。如果将来发生了变化（可能与此无关），导致它停止工作，用户需要了解它曾经是如何工作的，这时解释就变得尤为重要。 - Kevin Brown-Silva

Answer 5

我们可以使用background-size:contain;而不是background-size:100%;
查看此链接以获取不同的可用选项：http://www.css3.info/preview/background-size/

- vivekj011

Answer 6

这将会像魔法一样奏效。

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

- Jayanta Biswas

---

谢谢。我特别在找那个。我几年前做过，但现在忘了。 - Alex Rogachevsky

contain并没有覆盖整个div。因此，cover似乎是op正在寻找的。 - webs

Answer 7

1. 我同意yossi的例子，将图像拉伸以适应div，但以稍微不同的方式实现（在css 2.1中没有background-image这个属性有点不够灵活）。显示完整的图像：

   <div id="yourdiv">
       <img id="theimage" src="image.jpg" alt="" />
   </div>
   
   #yourdiv img {
       width:100%;
     /*高度将自动调整以保持长宽比*/
   }
   

2. 使用background-position来显示图像的一部分：

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

3. 与（1）的第一部分相同，图像将缩放到div大小，所以大或小都可以工作。

4. 与yossi的相同。

- Bazzz

---

错误，我的帖子格式化没有起作用？我使用了工具栏图标... :( - Bazzz

我之前试过了，现在也试过了。如果图片大小是100像素乘以100像素，而div的大小是400像素乘以400像素，那么它会固定在左上角。它不会拉伸。背景大小也不起作用。使用IE8、Firefox、Chrome和Safari最新版本的浏览器。 - Aakash Sahai

这是一个例子：http://jsfiddle.net/9mawE/1/ div宽度为150像素。Google标志的宽度超过150像素，但被缩小以适应div。Google Earth图标的宽度小于150像素，并被放大以适应150像素宽的div。背景大小在IE 8中不起作用，因为它是CSS 3，而CSS 3仍未得到支持。 - Bazzz