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％點對齊在該點之上。