请指点迷津（background-size）~~

来源：2-11 编程练习

慕UI9243256

2019-09-05 22:43:37

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background-size</title>

    <style type="text/css">
    a{
        text-decoration: none;
    }
    li{
        list-style: none;/*设置所有的列表属性*/
        display: block;
        padding-top: 30px;
    }
    div{
        background: url('http://climg.mukewang.com/582c37e50001b08102000065.jpg') no-repeat;
        width: 100px;
        height: 100px;
        border: 2px solid red;
        display: none;
    }
    .length:hover>div{
        background-size:100px 100px; 
        display: block;
    }
    .percent:hover>div{
        background-size:50% 50%; 
        display: block;
    }
    .cover:hover>div{
        background-size:cover; 
        display: block;
    }
    .contain:hover>div{
        background-size:contain; 
        display: block;
    }

</style>
</head>
<body>
    <h2>background-size不同属性值的不同效果</h2>
    <ul>
        <li class="length">
            <a href="#">100px 100px</a>
            <div></div>
        </li>
        <li class="percent">
            <a href="#">50% 50%</a>
            <div></div>
        </li>
        <li class="cover">
            <a href="#">cover</a>
            <div></div>
        </li>
        <li class="contain">
            <a href="#">contain</a>
            <div></div>
        </li>
    </ul>
</body>
</html>         请问下，实际开发中background-size这类型的属性，可以怎么样的作用？

写回答

1回答