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

Question

我有三个问题:

1. 当我尝试在较小尺寸的div中使用背景图像时,div仅显示图像的一部分.如何显示图像的完整部分或特定部分？

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

3. CSS中有没有办法操纵图像的不透明度？

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