CSS 背景图像：如果图像很小，如何填充整个 div，反之亦然
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4779577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background images: how to fill whole div if image is small and vice versa
提问by Aakash Sahai
I have three problems:
我有三个问题：
When I tried to use a background image in a smaller size div, the div shows only part of image. How can I show the full or a specific part of image?
I have a smaller image and I want to use in a bigger div. But don't want to use repeat function.
Is there any way in CSS to manipulate the opacity of an image?
当我尝试在较小尺寸的 div 中使用背景图像时，该 div 仅显示图像的一部分。如何显示图像的完整或特定部分？
我有一个较小的图像，我想在更大的 div 中使用。但不想使用重复功能。
CSS 中有什么方法可以操纵图像的不透明度吗？
回答by yossi
Resize the image to fit the div size.
With CSS3 you can do this:
调整图像大小以适合 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:
About opacity
关于不透明度
#yourdiv {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Or look at CSS Image Opacity / Transparency
回答by Ouadie
To automatically enlarge the image and cover the entire div section without leaving any part of it unfilled, use:
要自动放大图像并覆盖整个 div 部分而不留下任何未填充部分，请使用：
background-size: cover;
回答by Dnyaneshwar Harer
This worked perfectly for me
这对我来说非常有效
background-repeat: no-repeat;
background-size: 100% 100%;
回答by Behnia Esmailian
Try below code segment, I've tried it myself before :
试试下面的代码段，我以前自己试过：
#your-div {
background: url("your-image-link") no-repeat;
background-size: cover;
background-clip: border-box;
}
回答by vivekj011
Rather than giving background-size:100%;
We can give background-size:contain;
Check out this for different options avaliable: http://www.css3.info/preview/background-size/
而不是给background-size:100%;
我们可以给background-size:contain;
看看这个不同的可用选项：http: //www.css3.info/preview/background-size/
回答by Jayanta Biswas
This will work like a charm.
这将像魅力一样发挥作用。
background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
回答by Bazzz
I agree with yossi's example, stretch the image to fit the div but in a slightly different way (without background-image as this is a little inflexible in css 2.1). Show full image:
<div id="yourdiv"> <img id="theimage" src="image.jpg" alt="" /> </div> #yourdiv img { width:100%; /*height will be automatic to remain aspect ratio*/ }Show part of the image using background-position:
#yourdiv { background-image: url(image.jpg); background-repeat: no-repeat; background-position: 10px 25px; }Same as the first part of (1) the image will scale to the div so bigger or smaller will both work
Same as yossi's.
我同意 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*/ }使用背景位置显示图像的一部分：
#yourdiv { background-image: url(image.jpg); background-repeat: no-repeat; background-position: 10px 25px; }与 (1) 的第一部分相同，图像将缩放到 div，因此更大或更小都可以工作
和yossi的一样。
