Question

我尝试使用:before和:after在div之前和之后放置图像。不幸的是，我没有看到图像。为什么呢？

以下是代码（以及jsfiddle）：

<div style="border:1px solid green; padding:50px;">
  <div id="videos-part">test</div>
</div>

#videos-part{

    height: 127px;
    width: 764px;
border:1px solid red;
    margin:30px;
    padding:30px;
}
#videos-part:before{
    width: 46px;
    height:46px;
    content: "before ";
    background-image: url(http://aux.iconpedia.net/uploads/136059938344542682.png);

}
#videos-part:after{
    width: 46px;
    height:46px;
    content: " after";
    background-image: url(http://aux.iconpedia.net/uploads/136059938344542682.png);

}

Answer 1

使用pseudo element您可以添加图片和自定义图标，也可以创建自定义图形。首先检查 DEMO 。

#videos-part{
    height: 127px;
    width: 764px;
border:1px solid red;
    margin:30px;
    padding:30px;
}
#videos-part:before{
    width: 46px;
    height:46px;
    content: " ";
    position:absolute;
    top:30px;
    left:30px;
    background-image: url("http://lorempixel.com/50/50/");

}
#videos-part:after{
    width: 46px;
    height:46px;
    content: " ";
    position:absolute;
    top:30px;
    left:60px;
    background-image: url("http://placehold.it/100x50");

}

Answer 2

您需要应用以下语法：

content: url(imageURL);没有background-image。

CSS：

#videos-part{

    height: 127px;
    width: 764px;
border:1px solid red;
    margin:30px;
    padding:30px;
}
#videos-part:before{
    width: 46px;
    height:46px;
    content: url(http://aux.iconpedia.net/uploads/136059938344542682.png);
}
#videos-part:after{
    width: 46px;
    height:46px;
    content: url(http://aux.iconpedia.net/uploads/136059938344542682.png);

}

Demo

Answer 3

在选择器之前和之后将display:inline-block添加到#videos-part。

#videos-part:after, #videos-part:before {
    display:inline-block;
}

此处更新了fiddle。

Answer 4

这是一个更新的小提琴http://jsfiddle.net/vlrprbttst/u234x/7/

1）你的图片的网址是错的（我放了一个占位符） 2）content必须保持空白 3）您可能需要将relative应用于父div和absolute到伪元素:before和:after并使用top放置它们/ bottom left / right值

css：在div之前放置图像：before

4 个答案: