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;