使用:before在div之前放置图像 [英] Place image before div using :before
本文介绍了使用:before在div之前放置图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用:before
和:after
在div
之前和之后放置图像.
不幸的是,我没有看到图像.为什么?
I'm trying to place an image before and after div
using :before
and :after
.
Unfortunately, I don't see images. Why?
这是代码(在 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);
}
推荐答案
使用pseudo element
,您可以添加图像和自定义图标,也可以创建自定义形状.首先检查 DEMO .
Using pseudo element
you can add images and custom icon and create custom shapes as well. Check the DEMO first.
#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");
}
这篇关于使用:before在div之前放置图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文