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

我有三个问题：

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

2. 我有一个较小的图像，我想用在一个更大的股利。 但是不想使用重复function。

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

Answer 1

调整图像的大小以适应div大小。
用CSS3你可以这样做：

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

如何在Web页面中拉伸背景图像 ：

关于不透明度

 #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-size:100%;
我们可以给background-size:contain;
看看这个不同的选项可用： http : //www.css3.info/preview/background-size/

Answer 4

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

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

Answer 5

这将像一个魅力工作。

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

Answer 6

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

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

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

3. 与（1）的第一部分相同，图像将缩放到div，所以更大或更小将起作用

4. 和yossi一样。

Answer 7

这对我来说是完美的

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