CSS 图像位置/焦点答案

【问题标题】：CSS Image position/focusCSS 图像位置/焦点
【发布时间】：2017-01-05 11:51:10
【问题描述】：

我正在建立一个网站，但我想放置在背景中的图像无法放置在我想要的位置。

我希望网页上图像的“焦点”距离图像中心几 px。宽度我都能看到，但高度不行。

图片分辨率为“5760x3840px”。

所以，我有这段用于图像设置的 css 代码。

.topwidget{
  max-width: 100%;
  height: auto;
  background-image: url(../images/welcome_banner_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom 1000px;
  margin-bottom: 20px;
  padding: 50px 0;
}

【问题讨论】：

你试过 background-size: 100%; 100%；与你给的背景位置
也许您应该编辑您的图像以完美缩放？
你试过 background-size:cover; .. .而不是百分比...？
试试这个背景位置：center 10px;

标签： css image css-position background-position

【解决方案1】：

Try this
.topwidget{
  max-width: 100%;
  height: auto;
  background-image: url(../images/welcome_banner_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  **background-position: center 10px;**
  margin-bottom: 20px;
  padding: 50px 0;
}

【讨论】：

好吧，你的方法不太行，但我稍微改变了中心像素并解决了！ .topwidget{ 最大宽度：100%;高度：自动；背景图片：网址（../images/welcome_banner_bg.jpg）；背景重复：不重复；背景尺寸：100%；背景位置：中心-425px；边距底部：20px；填充：75px 0； }