css3伪类before插入svg，调整大小-静水博客

css3伪类before插入svg，调整大小

2019/01/22

css3伪类before插入svg图片不好调整大小。

1.直接插入调整，关键是转content为块级元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
                .test1:before{
                    content:url(test.svg);
                    width: 100px;
                    display: inline-block;
                }
                .test2:before{
                    content:url(test.svg);
                    width: 200px;
                    display: inline-block;
                }
        </style>
    </head>
    <body>
        <div>
        </div>
        <div>
        </div>
    </body>
</html>

2,作为背景插入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
                .test1:before{
                    content:"";
                    width: 100px;
                    height:100px;
                    background: url(test.svg);
                    background-size:100% auto;
                    display: inline-block;
                }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

上一篇: css3瀑布流实现

下一篇: c#图片完美裁剪，新闻展示

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章