CSS背景大小的封面和背景位置 [英] CSS background-size cover and background-position

问题描述

HTML：

  #backgroundproduct {position：fixed;前5％;左：5％;宽度：90％;身高：90％; z-index：12; -webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; background-size：cover; < div id =    backgroundproductstyle =background-image：url（http://example.com/example.jpg）>  

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

我怎样才能让背景变得有点儿？如果底部更重要： background-position：bottom; >

$ background-position 也允许百分比值： 0％0％; code>默认情况下。



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

您应该尝试 background-position ：0％-10％;

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

I'm using a images as a background image, only the lower part of the image is more important than the top.

How can I make the background go up a little?

解决方案

If the bottom is more important: background-position: bottom;

background-position also allows percentage values: 0% 0%; by default.

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.

You should try background-position: 0% -10%;

这篇关于CSS背景大小的封面和背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！