【问题标题】: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; }
猜你喜欢
  • 2017-06-23
  • 2015-06-16
  • 2020-09-13
  • 2021-02-16
  • 2016-07-20
  • 1970-01-01
  • 2021-09-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多