Question

当我使用:after pseudo class with background image时，它在我的div中没有显示。为什么会这样？

P.S。当我应用position：absolute top：0，right：0，我可以看到图像。

<div class="vienas">abra kadabra</div>

.vienas {
height:200px;
border: 1px solid black;
position: relative;
}

div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}

Answer 1

默认情况下，伪元素设置为显示inline。因此，您的width和height属性不会对元素产生任何影响，而是默认为内部内容的宽度和高度。

您需要将其设置为display: block：

div::after {
  ...
  display: block;
}

JSFiddle demo

Answer 2

请尝试以下操作： Demo

<强> CSS：

div:after {
    content:"";
    background: url("http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg") no-repeat -100px -100px fixed;
    width:100px;
    height: 100px;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

：伪类后没有插入背景图像

2 个答案: