Question

我正在创建一个网站插件，它会在div中显示图像上的其他信息 - 让我们称之为wrapper。将wrappers添加，然后动态加载到许多外部页面上。这就是为什么我必须满足一些严格的要求。

wrapper 始终应完全重叠图片（此wrapper中的正确定位项所需）。特别是在以下情况下：

当页面内容发生变化时（页面的元素大小和位置相应），wrapper仍应与其图像重叠
图像尺寸更改时
当用户更改分辨率/放大/缩小页面时

当页面使用链式（？）样式规则时，我需要处理这种情况：

.someelement img{ important styles }

我认为这会剥夺使用div包装图像的资格，因为它会破坏原始图像样式。

什么是正确的方法？

修改

关于使用附加div包装图像的一点说明。让我们说客户想要修改这种风格的图像（矩形）：

.myclass p img{
  width: 250px;
  height: 150px;
}

<div class="myclass">
  <p>
    <a href="stackoverflow.com">
      <img src="http://placehold.it/150x150" />
    </a>
  </p>
</div>

如果我用img-holder像Praveen Kumar那样包裹图像，那么图像会失去它的原始风格（现在它是一个正方形）。事实证明，段落标记会破坏它。

<!-- client css, cannot be modified -->
.myclass p img{
  width: 250px;
  height: 150px;
}

<!-- my css, can be modified -->

.img-holder {position: relative; display: inline-block; z-index: 1;}
.img-holder .img-mask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(255,255,255,0.2);}
.img-holder img {display: block; position: relative; z-index: 1;}

<div class="myclass">
  <p>
    <a href="stackoverflow.com">
      <div class="img-holder">
        <div class="img-mask">Mask</div>
        <img src="http://placehold.it/150x150" />
      </div>
    </a>
  </p>
</div>

Answer 1

您可以使用div inline-block的父.img-holder {position: relative; display: inline-block; z-index: 1;} .img-holder .img-mask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(255,255,255,0.2);} .img-holder img {display: block; position: relative; z-index: 1;}显示图像，并且...我可以在此处显示演示：

<div class="img-holder">
  <div class="img-mask">Mask</div>
  <img src="http://placehold.it/150x150" />
</div>

inline-block

父母应显示block以根据图片进行调整。
图片应该有inline-block或position: absolute显示，以确保它不会留出任何额外的空格。
面具应该有img。

这将扩展到[(GameViewcontroller *)self.view.window.rootViewController dismissViewControllerAnimated:YES completion:nil];的大小，并且正确地适合图像。看看吧。

动态添加div over image

1 个答案: