CSS背景大小封面和背景位置

Question

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)"> 

我使用图像作为背景图像，只有图像的下半部分比顶部更重要。

如何让背景变得有点？

Answer 1

如果底部更重要： background-position: bottom;

background-position也允许百分比值： 0% 0%; 默认。

第一个值是水平位置，第二个值是垂直位置。 左上角为0％0％。 右下角是100％100％。 如果只指定一个值，则另一个值为50％。

你应该尝试background-position: 0% -10%;

Answer 2

您可以使用：

background-position: center bottom;

Answer 3

需要明确的是，背景位置百分比是根据图像和背景容器计算的。 所以，背景位置：25％25％; 会在背景容器上找到X和Y的25％点，并将图像的25％，25％点对齐在该点之上。