是否:之前不工作的img元素?

我试图使用:before选择器将图像放在另一个图像上，但我发现它根本不能将图像放在img元素之前，只有一些其他元素。具体来说，我的风格是:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

我发现这很有效:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

但这不是:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

我可以使用div或p元素来代替这个span，浏览器会正确地将我的图像覆盖到img元素中的图像上，但如果我将overlay类应用到img本身，它就不起作用了。

我想让它工作，因为这个额外的span冒犯了我，但更重要的是，我有大约100篇博客文章，我想修改，如果我可以修改样式表，我可以一次完成这一点，但如果我必须返回并在a和img元素之间添加一个额外的span元素，这将是更多的工作。

当前回答

我试着找到了一个更简单的方法。下面是HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

我所做的是在我的图像标签后放置一个空的<p>标签。现在我将使用p::before来显示图像，并根据我的需要来定位它。下面是CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

试一试。

2014-11-19 06:32:46

其他回答

这个对我很有用:

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

2019-02-05 08:50:10

由::before和::after生成的伪元素包含在元素的格式化框中，因此不适用于替换的元素，如img或br元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

2019-09-24 17:23:00

只要给图像“position: relative”，它就可以工作了

2021-01-27 12:43:32

在这些情况下，最好使用<figure>标记，它允许您以最佳的方式管理css 这样你就可以用后才上图了

例子

<div class="exemple">
  <figure>
    <img src="img1.jpg"/>
  </figure>
  <figure>
    <img src="img2.jpg"/>
  </figure>
</div>

2022-03-10 14:20:22

我找到了一个方法，让这个工作在纯css:

“我只是假内容”方法

一个纯CSS方法来启用img:after。

你可以查看CodePen: I'm just fake content或查看源代码。

来源和代码片段

img { /* hide the default image */ height:0; width:0; /* hide fake content */ font-size:0; color:transparent; /* enable absolute position for pseudo elements */ position:relative; /* and this is just fake content */ content:"I'm just fake content"; } /* initial absolute position */ img:before, img:after { position:absolute; top:0; left:0; } /* img:before - chrome & others */ img:before { content:url(http://placekitten.com/g/250/250); } /* img:before - firefox */ body:not(:-moz-handler-blocked) img:before { padding:125px; background:url(http://placekitten.com/g/250/250) no-repeat; } /* img:after */ img:after { /* width of img:before */ left:250px; content:url(http://lorempixel.com/350/200/city/1); } <img alt="You are watching the ~ I'm just fake content ~ method" />

浏览器支持

✓Chrome 10 +。

✓火狐11 +

Opera 9.8+

✓ 野生动物园

不支持

⊗Internet Explorer 8 / 9

请在其他浏览器中测试

2012-05-29 18:00:51

是否:之前不工作的img元素?

推荐文章

最新文章

标签