css选择器可以插入图片吗
css选择器可以插入图片,如CSS选择器“:before”和“:after”,其插入方法就是使用content属性来插入图片,使用语法如“.p_beforeImg:before {content: ''; background...”}。
本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。
推荐:《css视频教程》
CSS选择器:before、:after可以使用content属性来插入图片。
content 属性与 :before 及 :after 伪元素配合使用,在元素头或尾部来插入生成内容。
说明: 该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的盒子类型可以用属性 display 控制。
认识 :before 和 :after
默认 display: inline;
必须设置 content 属性,否则一切都是无用功, content 属性也只能应用在 :before 和 :after 伪元素上;
默认user-select: none,就是 :before 和 :after 的内容无法被用户选中;
伪元素可以和伪类结合使用形如:.target:hover:after。
:before 和 :after 是在CSS2中提出来的,所以兼容IE8;
::before 和 ::after 是CSS3中的写法,为了将伪类和伪元素区分开;
CSS 中其他的伪元素有:::before、::after、::first-letter、::first-line、::selection 等;
不可通过DOM使用,它只是纯粹的表象。在特殊情况下,从一个访问的角度来看,当前屏幕阅读不支持生成的内容。
示例1:通过before添加三角尖图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3</title> <style type="text/css"> .p_beforeImg { background: #eeeeee; width: 200px; height: 80px; border-radius: 6px; padding: 10px 20px; position: relative; } .p_beforeImg:before { content: ''; background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容没测*/ position: absolute; top: -15px; z-index: 2; width: 32px; height: 16px; } </style> </head> <body> <p class="p_beforeImg">通过before添加三角尖图片</p> </body> </html>
效果图:
示例2:
把before的地方换成after,插入图片样式用一下的就行
.p_afterImg { background: #eeeeee; width: 200px; height: 80px; border-radius: 6px; padding: 10px 20px; position: relative; } .p_afterImg:after { content: ''; background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容没测*/ position: absolute; bottom: -15px; z-index: 2; width: 32px; height: 16px; }
效果图:
以上就是css选择器可以插入图片吗的详细内容,更多请关注其它相关文章!
推荐阅读
-
爱剪辑可以添加图片吗?添加图片到视频里面的教程
-
css3 2D图片转动样式可以扩充到Js当中
-
360抢票王等抢票软件可以识别图片验证码吗 不能识别图形验证码的解决教程
-
CSS 中的六个重要选择器(三秒就可以记住)
-
非常漂亮的CSS格式,可以和图片媲美 CSS交通Microsoft
-
Re: js或css里有让图片旋转角度的控制吗?(45度,12度) CSS
-
手机wps软件可以将图片转文字吗?wps app将图片转换成文字的方法介绍
-
Excel可以截图吗如何将鼠标选中的单元格区域复制粘贴为图片
-
发现一个特效会让你有意思,有人知道这个用css可以做出来吗,怎么做?_html/css_WEB-ITnose
-
php可以去除jpg格式图片的背景并加水印吗?