背景图像：如果图像很小，如何填充整个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%;
}

如何拉伸网页中的背景图像< /a>：

关于不透明度

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

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

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

1. 我同意yossi的例子，拉伸图像以适应div，但方式略有不同（没有背景图像，因为这在css 2.1中有点不灵活）。显示完整图像：

   
       
   
   
   #yourdiv img {
       宽度：100%；
     /*高度将自动保持宽高比*/
   }
   

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

   <前><代码>#yourdiv
   {
   背景图像： url(image.jpg);
   背景重复：不重复；
   背景位置：10px 25px；
   }

3. 与 (1) 的第一部分相同，图像将缩放到 div，因此更大或更小都可以工作

4. 与 yossi 的相同。