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>