主页 / 问题 / 781120
Accepted
Meetromb
Asked:2020-02-06 22:14:48 +0000 UTC2020-02-06 22:14:48 +0000 UTC

相对于背景定位块

  • 772

有一个不平凡的任务。

html, body, .bg-cover {
  height: 100%;
  margin: 0;
}

.bg-cover {
  background-image: url(//i.stack.imgur.com/JkEWk.jpg);
  background-size: cover;
}

.element {
  position: absolute;
  background: red;
  background: rgba(255,0,0,.5);
  height: 10.416666666666668vw;
  width: 18.75vw;
  background-size: cover;
  z-index: 2;
  left: 29.947916666666668vw;
  top: 24vh;
}
<div class="bg-cover">
  <div class="element"></div>
</div>

背景图片：

背景

需要定位element在电视背景的白色区域，这样背景和块的相对位置才不会被打乱element。

问题是在不同的屏幕分辨率下，背景的缩放比例不同。也许您可以通过某种方式获得背景上像素的位置js并对此进行播放？

有没有人遇到过类似的问题？

javascript

3 个回答

  1. Best Answer

    该解决方案是自适应的，适用于所有浏览器，包括Edge.

    为了两个带有图像的块 - 在你的情况下，房间的图片和电视上的背景图像，以一致的方式改变它们的比例并且不违反它们的相互定位，你必须将两个图像放在块内SVG 

    <style>
html, body, .bg-cover {
  height: 100%;
  margin: 0;
}
.element {
width:100%; 
height:100%;
}

</style> 
    <div class="bg-cover">
  <div class="element">
  <svg viewBox="0 0 1776 943">
  <image xlink:href="http://i.stack.imgur.com/JkEWk.jpg" width="100%" height="100%" />
  <image xlink:href=" https://isstatic.askoverflow.dev/keh4g.jpg" x="537" y="212" width="19.1%" height="19.1%" />
  </svg>
   </div>
</div>

    使电视上的图像动态变化是很有趣的。这个想法很明确 - 您需要将带有图像的精灵隐藏在卧室图片下方并滚动精灵，以便通过电视屏幕的凹槽看到精灵。
    我尝试了很长时间使用蒙版、剪辑、组合方法的选项，但没有成功。电视屏幕上形成了一个洞，但通过它看不到精灵。

    有谁知道如何做到这一点？

    更新
    动态图像变化解决方案 -模拟电视屏幕上的图像变化

    • 12

  2. svg，当然是一项强大的技术，但在 svg 画布上定位元素与css. 对于更改，我将提供此选项（而不是 gif，例如，您可以放一个视频）。

    PScover看到裁剪背景图像 ( )的解决方案会很有趣。同样，无论是在我的版本中还是在 Alexandr_TT 的解决方案中，都保留了背景的比例。

    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
img{
  max-width:100%;
}
.room{
  position:relative;
}
.room__bg{
  display:block;
  width:100%;
  height:auto;
}
.room__tv{
  position:absolute;
  top:21.7%;
  left:30.15%;
  width:19.3%;
  height:20.2%;
  background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/220px-Rotating_earth_%28large%29.gif) no-repeat center/cover;
}
    <div class="room">
  <img src="//i.stack.imgur.com/JkEWk.jpg" class="room__bg" alt="" />
  <div class="room__tv"></div>
</div>

    • 3

  3. 如果图像的大小不是很重要或分辨率不是太高，您可以用笨拙的方式使它更容易。获取背景并将其上传到 Photoshop，将所需元素添加到另一层并定位它，隐藏背景并与元素一起保存图片。我们得到相同大小的背景和元素，元素分别具有透明背景。在布局中，将两个块放在一起，background-size:cover;background-position: 50% 50%;width:100%;height:100%;left:0;top:0;就是这样。

    • 0

相关问题