37

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

背景画像として画像を使用していますが、画像の下部のみが上部よりも重要です。

背景を少し上げるにはどうすればよいですか？

4

3 に答える 3

45

下の方が重要な場合:background-position: bottom;

background-positionパーセンテージ値も許可します:0% 0%;デフォルトで。

最初の値は水平位置で、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。1 つの値のみを指定すると、もう 1 つの値は 50% になります。

試してみてくださいbackground-position: 0% -10%;

于 2012-12-18T00:40:02.870 に答える
10

以下を使用できます。

background-position: center bottom;
于 2012-12-18T00:40:20.800 に答える
2

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.

于 2013-07-10T13:35:43.093 に答える