如何使用css在图像上显示框：在[重复]之后

Question

我有更多页面的 web 应用程序，我无法更改所有页面，但我可以更改 css 代码。

我有一个带有 css 类的“缩略图”标签的 img 来显示图像。

我想用 css 在图像上显示一个框。

.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:#ff0;content:" ";z-index:100;}

<img class="thumbnail" src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />

当我在 css 中使用 :after 时，我看不到任何效果！

有没有什么解决方案可以在没有附加标签的情况下显示覆盖框而只使用css？

提前致谢。

Answer 1

由于浏览器行为和 css 规则，我改变了我的策略，并改变了所有页面；）

添加一个 div 作为图像的容器。 风格为“位置：相对”

将图像添加为 div 的子元素。

将 :after 类添加到容器中。

.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:rgba(255,0,0,0.5);content:" ";z-index:100;}
.thumbnail>img {width:128px;height:128px;}

<div class="thumbnail">
  <img src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
</div>

感谢所有朋友

Answer 2

这是不可能的。被替换的元素不能有::before 和::after 伪元素。

替换内容

如果 'content' 属性部分的计算值结束 up 被使用的是单个 URI，那么元素或伪元素是 替换元素。盒子模型为布局定义了不同的规则 替换元素比正常元素。被替换的元素不 有 '::before' 和 '::after' 伪元素； “内容”属性 在替换内容的情况下替换整个内容 元素的盒子。

要在替换内容周围插入文本，'::outside::before' 和 '::outside::after' 可以使用。

你可以通过选择一个父元素来放置伪元素来解决这个问题。

参考：w3.org - Generated and Replaced Content Module - Replaced content