是否:之前不工作的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元素，这将是更多的工作。

当前回答

我认为了解为什么这行不通的最好方法是:before和:after将它们的内容插入到你应用它们的标签内的内容之前或之后。所以它适用于div或span(或大多数其他标签)，因为您可以在其中放置内容。

<div>
:before
Content
:after
</div>

但是，img是一个自包含、自结束标记，由于它没有单独的结束标记，所以不能在其中放入任何东西。(这需要看起来像<img>Content</img>，但当然这是行不通的。)

我知道这是一个老话题，但它首先出现在谷歌上，所以希望这能帮助其他人学习。

2018-04-17 14:57:15

其他回答

我试着找到了一个更简单的方法。下面是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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

      #image img{
    display: inline-block;
    max-width: 50%;
    }

      #image::after {
    position: absolute;
    top: 0;
    content: url('https://img.icons8.com/plasticine/100/000000/about.png');
    }

    </style>
    <title>img before</title>
  </head>
  <body>
    <a id="image" href="">
    <img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
    </a>
  </body>
</html>

2022-07-13 11:27:29

试试这段代码

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

2019-10-12 18:14:35

<div>
:before
Content
:after
</div>

我知道这是一个老话题，但它首先出现在谷歌上，所以希望这能帮助其他人学习。

2018-04-17 14:57:15

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

例子

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

2022-03-10 14:20:22

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

推荐文章

最新文章

标签