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>

效果图:

1.png

示例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;
    }

效果图:

2.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css选择器可以插入图片吗?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏