老师,麻烦检查下

来源:2-7 编程练习

山有木兮木有枝z

2020-06-11 23:10:26

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>background-origin</title>
        <style type="text/css">
            div{
                width:350px;
                height:150px;
                border:10px purple solid;
                padding:10px;
                background:url("http://climg.mukewang.com/582c342b0001fd6507000210.jpg") no-repeat;
            }
            div:hover{
                background:url("http://climg.mukewang.com/582c34220001091605000150.jpg") no-repeat 10px 10px;
                background-origin:content-box;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

写回答

1回答

好帮手慕慕子

2020-06-12

同学你好,可以将边框设置为透明,方便查看背景图片的绘制情况。

练习要求如下所示

http://img.mukewang.com/climg/5ee2f23a099efd2a05140133.jpg

测试同学的代码效果如下所示,背景图片绘制到边框了

http://img.mukewang.com/climg/5ee2f26709f59ce405000215.jpg

建议:添加background-clip属性调整背景图片一开始的显示为位置。

http://img.mukewang.com/climg/5ee2f2a6092d6de911100273.jpg

鼠标移入时,背景图片从边框开始绘制,如下:

http://img.mukewang.com/climg/5ee2f2b3095ac2f311870144.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程