css 在静态背景图像上定位动态元素

tvz2xvvm 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(133)

我有一个横幅部分在一个新的网页上，我的工作。有一个静态图像背景图像的div，然后我有一个绝对定位的图标和图像的背景图像。有一个特定的点的图标和图像需要放置在背景图像，它需要始终在该位置。我怎样才能确保图标和图像的位置都在我的背景图像的Map图标上，无论屏幕大小如何。我开发了一个1920 x1080的标准，但去一个更大的屏幕尺寸导致它从这个位置移动出来。什么是最好的解决方案？

#Banner {
  background-image: url('/wp-content/uploads/2023/07/w3CP-071823-04-Website-Concept_FranchisePage_HEADER_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

#Banner .container {
  width: 1400px;
  max-height: 350px;
  min-height: 350px;
  position: relative;
}

#Banner .container h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 3.5rem;
  width: 60%;
  line-height: 1;
}

#Banner .container .loc-icon {
  width: 14.5%;
  position: absolute;
  right: 15.5%;
  top: 15%;
}

#Banner .container .loc-img {
  position: absolute;
  right: 16.25%;
  top: 18%;
  width: 13%;
  border: solid 0.75em #fff;
  border-radius: 50%;
}

个字符
在背景图像Map部分上正确放置图标/图像：x1c 0d1x的数据
背景图像Map部分上的图标/图像位置不正确：

的

css

来源：https://stackoverflow.com/questions/76823033/positioning-dynamic-element-over-static-background-image

1条答案

按热度按时间

bcs8qyzn1#

我已经为几个项目解决了这个问题，我喜欢用背景图像的百分比来表示坐标。这样的话，图像的放置位置就可以不受图像尺寸的限制，并且很容易进行重新设计。将背景图像和要放置的元素放置在容器div中。如果必须设置图像大小的样式，请在容器div而不是img元素上执行此操作，以使它们的大小完全相同。根据需要确定元素的绝对位置，可以选择在x和y轴上平移-50%，以便元素的中心位于坐标上。下面的示例将一个红色正方形放置在图像的正中心。

.container {
  position: relative;
  width: 400px;
}

.image {
  object-fit: contain;
  width: 100%; 
}

.placed { 
  position: absolute;
  background-color: red;
  width: 20px;
  height: 20px;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  top: 50%;
  left: 50%;
}

个字符

赞(0）回复(0）举报 2023-08-09

我来回答

css 在静态背景图像上定位动态元素

1条答案

相关问题

热门标签

最新问答