CSS 图像位置/焦点

标签 css image css-position background-position

我正在建立一个网站,但我想将图片放在背景中,但我无法将其放在我想要的位置。

我希望网页上图像的“焦点”位于图像中心几像素处。宽度我都能看出来,但是高度没有。

图像分辨率为“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;
}

最佳答案

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

关于CSS 图像位置/焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41484388/

相关文章:

html - 星级评定系统 : Works on only one instance

html - 如何让某些东西出现在位置 :fixed; element? 之后

css - Firefox 不对齐 right : as expected

css - ionic 如何在图像旁边添加按钮

python - 如何为draw.text中的文本分配不同的颜色

image - ffmpeg 中忽略 vframes 选项?

html - 仅当滚动到底部时才将页脚固定到底部

CSS DIV定位和边框问题

html - 如何仅倾斜/倾斜 div 的底部

html - 当位置从绝对变为相对时设计崩溃