Question

我有三个问题：

当我尝试在较小尺寸div中使用背景图像时，div仅显示图像的一部分。如何显示图像的完整部分或特定部分？
我有一个较小的图像，我想在更大的div中使用。但是不想使用重复功能。
CSS中有没有办法操纵图像的不透明度？

Answer 1

调整图像大小以适合div大小使用CSS3，您可以这样做：

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

How Do you Stretch a Background Image in a Web Page：

关于不透明度

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

或者查看CSS Image Opacity / Transparency

Answer 2

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

background-size: cover;

Answer 3

这对我来说很完美

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

Answer 4

尝试以下代码段，我之前自己尝试过：

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

Answer 5

而不是给background-size:100%;
我们可以给background-size:contain;
查看这个可用的不同选项：http://www.css3.info/preview/background-size/

Answer 6

这就像魅力一样。

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

Answer 7

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

使用background-position：

显示图像的一部分

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

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

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

7 个答案: