2-11 编程练习作业提交

来源：2-11 编程练习

MiMicccc

2020-09-08 16:10:07

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background-size</title>
    <style type="text/css">
        a{text-decoration:none;}
        ul{list-style:none;}
        div{background-image:url("http://climg.mukewang.com/582c37e50001b08102000065.jpg");width:100px;height:100px;display:none;border:2px solid red;background-repeat:no-repeat;}
        /*补充代码*/
        .length:hover > div,.percent:hover > div,.cover:hover > div,.contain:hover > div{display:block;}
        .length:hover > div{background-size:100px 100px;}
        .percent:hover > div{background-size:50% 50%;}
        .cover:hover > div{background-size:cover;}
        .contain:hover > div{background-size:contain;}
    </style>
</head>
<body>
    <h2>background-size不同属性值不同效果</h2>
    <ul>
        <li  class="length">
            <h3><a href="">100px 100px</a></h3>
            <div></div>
        </li> 
        <li  class="percent">
            <h3><a href="">50% 50%</a></h3>
            <div></div>
        </li> 
        <li  class="cover">
            <h3><a href="">cover</a></h3>
            <div></div>
        </li> 
        <li  class="contain">
            <h3><a href="">contain</a></h3>
            <div></div>
        </li> 
    </ul>
</body>
</html>

写回答

1回答