找到你要的答案

Q:how to show box over image with css :after [duplicate]

Q:如何显示框的图像用CSS:[重复]后

This question already has an answer here:

I have web application with some more pages and i cant change the all pages, but i can change the css code.

I have a img with "thumbnail" tag with css class to show the image.

i want to show a box over image with 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" />

When i use the :after in css, i cant see any effect!

Is there any solution to show overlay box without additional tag and just use css?

Thanks In Advance.

这个问题在这里已经有了答案:

我有一些页面的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,我不能看到任何效果!

那里显示覆盖盒没有额外的标签,只是用CSS解决办法吗?

先谢谢了。

answer1: 回答1:

This is not possible. Replaced elements could not have ::before and ::after pseudo-elements.

Replaced content

If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.

To insert text around replaced content, '::outside::before' and '::outside::after' may be used.

You could solve the problem by selecting a parent element to place the pseudo-element.

Reference: w3.org - Generated and Replaced Content Module - Replaced content

这是不可能的。替换元素不能有::前和后::伪元素后。

更换内容

If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.

To insert text around replaced content, '::outside::before' and '::outside::after' may be used.

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

Reference: w3.org - Generated and Replaced Content Module - 更换内容

answer2: 回答2:

Because of browser behavior and css rules, i change my strategy, and change all pages ;)

Add a div as container for image. with style "position:relative"

Add image as child of div.

Add :after class to container.

.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>

Thanks to all friends

由于浏览器的行为和CSS规则,我改变了我的策略,改变所有页面;)

Add a div as container for image. with style "position:relative"

添加图像作为孩子的学

添加:类到容器后。

.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>

感谢所有的朋友

html  css  overlay  pseudo-element