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％点。

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

3 个答案: