你好,请问这样对不对?

来源:2-11 编程练习

慕用1366767

2020-02-26 12:11:40

<!DOCTYPE html>

<html>

<head>

    <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://img1.sycdn.imooc.com\/climg/582c37e50001b08102000065.jpg");

            width:100px;height:100px;

            display:none;border:2px solid red;

            background-repeat:no-repeat;

           /*  display:none; */

        }          

        /*补充代码*/

        .length:hover div{

            display:block;

            background-size:100px 100px;

        }

        .percent:hover div{

            display:block;

            background-size:50% 50%;

        }

        .cover:hover div{

            display:block;

            background-size:cover;

        }

        .contain:hover div{

            display:block;

            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回答

好帮手慕星星

2020-02-26

同学你好,代码是正确的。继续加油,祝学习愉快!

0

0 学习 · 40143 问题

查看课程