Css 背景图像：如果图像很小，如何填充整个div，反之亦然

我有三个问题：

当我尝试在较小的div中使用背景图像时，div仅显示图像的一部分。如何显示图像的全部或特定部分

我有一个较小的图像，我想在一个较大的div中使用。但不想使用repeat函数

CSS中是否有任何方法可以操纵图像的不透明度

---

调整图像大小以适合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 */
}

或者看看

我同意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*/
}

与（1）的第一部分相同，图像将缩放到div，因此大小都可以

和尤西的一样

---

而不是给出

背景大小：100%

我们可以给出
背景尺寸：contain

查看此选项可获得不同的选项：
要自动放大图像并覆盖整个div部分，而不留下任何未填充的部分，请使用：

background-size: cover;

这会很有效的

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

尝试下面的代码段，我以前也尝试过：


#你的div{
背景：url（“您的图像链接”）不重复；
背景尺寸：封面；
背景剪辑：边框框；
}
这对我来说非常有效

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

但这会给服务器带来负担，使其无法加载多个图像（正如v所知，这是类似的）…因此，使用多个图像，使用一个图像和拉伸n collasping是一种更好的方法..但不知道如何加载..第1点和第2点并不能解决此问题。第一点是保持图片的纵横比，第二点似乎根本不起作用。在CSS3中，背景大小属性将解决这个问题，在此之前，我想你必须坚持使用一些hack。IE不支持这个（背景大小）。Wt要做什么？呃，我的帖子的格式没用？我使用了工具栏图标…：（我之前也试过了。如果图像大小是100px 100px，而div的大小是400px 400px，那么它就固定在上角。itz不是strechg。背景大小也不起作用。使用ie8、firefox、chrome、safari最新浏览器就是一个例子：div的宽度是150px。谷歌徽标的宽度超过150px，但为了适应div，它被缩小了Google Earth图标的宽度小于150px，并且已按比例放大以适应150px宽的div，背景大小在IE 8中不起作用，因为它是CSS 3，仍然不受支持。欢迎使用堆栈溢出！虽然这个答案可能是正确和有用的，但如果您随附一些解释来解释它如何有助于解决pr问题，则最好使用它问题。如果有变化（可能无关），这在将来尤其有用这会导致它停止工作，用户需要了解它曾经是如何工作的。在我的情况下，这个页面上最小的评论和最大的好处是。谢谢对我来说不起作用，但我的div在a内部a内部a内部a。不知道这是否是为什么你可以为你的示例创建一个JSFIDLE？这样我们就可以帮助你了谢谢。我们特别寻找那个。几年前就做了，但忘记了。contain并没有覆盖整个div。所以封面似乎是op所要找的。这张适合背景图像的宽度和高度，正是所需要的。
background-repeat: no-repeat;
background-size: 100% 100%;