Html CSS 背景大小封面和背景位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13924626/
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
CSS background-size cover and background-position
提问by Ivo
HTML:
HTML：
#backgroundproduct {
position: fixed;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
z-index: 12;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: top;
}<div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">I'm using a images as a background image, only the lower part of the image is more important than the top.
我使用图像作为背景图像，只有图像的下部比顶部更重要。
How can I make the background go up a little?
我怎样才能让背景上升一点？
回答by Stéphane Bruckert
If the bottom is more important: background-position: bottom;
如果底部更重要： background-position: bottom;
background-positionalso allows percentage values: 0% 0%;by default.
background-position还允许百分比值：0% 0%;默认情况下。
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您只指定一个值，另一个值将为 50%。
You should try background-position: 0% -10%;
你应该试试 background-position: 0% -10%;
回答by vivek
You can use:
您可以使用：
background-position: center bottom;
回答by m b
Just to be clear, background-position percentages are calculated against BOTH the image and the background container. So, background-position: 25% 25%; would find the 25% point for both X and Y on the background container and align the image's 25%,25% point on top of that point.
为了清楚起见，背景位置百分比是针对图像和背景容器计算的。所以，背景位置：25% 25%；会在背景容器上找到 X 和 Y 的 25% 点，并将图像的 25%,25% 点对齐在该点的顶部。
