CSS 背景尺寸封面和背景位置答案

【问题标题】：CSS background-size cover and background-positionCSS 背景尺寸封面和背景位置
【发布时间】：2012-12-18 00:38:07
【问题描述】：

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;
}

&lt;div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)"&gt;

我使用图片作为背景图片，只有图片的下部比顶部更重要。

我怎样才能让背景上升一点？

【问题讨论】：

背景位置可以接受两个基于像素或百分比的数字。
还有没有办法“缩小”
背景尺寸也接受基于像素的数字

标签： html css background-image

【解决方案1】：

如果底部更重要：background-position: bottom;

background-position 还允许使用百分比值：默认情况下为0% 0%;。

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

你应该试试background-position: 0% -10%;

【讨论】：

谢谢你修复它我只是想错了。有没有办法“缩小”让你看到更多的图片？
是的，您可以将background-size 与百分比一起使用。 w3schools.com/cssref/css3_pr_background-size.asp
谢谢你，有时候你不知道自己在找什么时很难找到
如何只指定一个值？
如background-position: 20%;表示background-position: 20% 50%;

【解决方案2】：

你可以使用：

background-position: center bottom;

【讨论】：

这只是愚蠢的我没有想到这一点。谢谢！
你可以使用 background-size: contains;以适应 div 中的背景。但是，图像可能看起来不成比例，因为可能会发生拉伸。这是一个 CSS3 属性。
background-size: contain 保持位图的原始纵横比
@pmont，但它没有覆盖整个父元素。
试试background-size: cover。这就是我用来覆盖整个父背景的内容。如有必要，它会在保持原始纵横比的同时拉伸位图。

【解决方案3】：

为了清楚起见，背景位置百分比是根据图像和背景容器计算的。所以，背景位置：25% 25%；将在背景容器上找到 X 和 Y 的 25% 点，并将图像的 25%、25% 点对齐在该点之上。

【讨论】：

如果我指定像素值，(x, y)，它会找到图像上的(x, y) 位置并将其设置为容器的(50%, 50%) 位置吗？跨度>