麻烦老师查看作业，谢谢。

来源：2-9 编程练习

DanielDu87

2021-12-19 16:35:21

<!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');
            background-repeat: no-repeat;
            border: 2px solid red;
            display: none;
            height: 100px;
            width: 100px;
         }
         
         ul li div {
            background-repeat: no-repeat;
            width: 100px;
            height: 100px;
         }
         
         
         /*补充代码*/
         ul li.length:hover div {
            border: 3px solid red;
            content: none;
            background-image: url('http://climg.mukewang.com/582c37e50001b08102000065.jpg');
            background-size: 100%;
            display: block;
         }
         
         ul li.percent:hover div {
            border: 3px solid red;
            content: none;
            background-image: url('http://climg.mukewang.com/582c37e50001b08102000065.jpg');
            background-size: 50%;
            display: block;
         }
         
         ul li.cover:hover div {
            border: 3px solid red;
            content: none;
            background-image: url('http://climg.mukewang.com/582c37e50001b08102000065.jpg');
            background-size: cover;
            display: block;
         }
         
         ul li.contain:hover div {
            border: 3px solid red;
            content: none;
            background-image: url('http://climg.mukewang.com/582c37e50001b08102000065.jpg');
            background-size: contain;
            display: block;
         }
      </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回答