有问题吗?

来源:2-7 编程练习

慕瓜9075555

2020-02-12 19:13:21

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>background-origin</title>

        <style>

            div{

                width:350px;

                height:150px;

                background:url(http://climg.mukewang.com/582c342b0001fd6507000210.jpg) no-repeat center center;

                border:10px solid blue;

            }

            div:hover{

                position:absolute;

                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-02-12

同学你好,代码中的问题,回答如下:

1、边框颜色需要设置透明度;建议:可以使用rgba。例:

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

2、背景图片显示范围从内边距框开始,建议:可以使用background-clip属性,例:

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

3、hover的时候背景图片显示范围从边框开始,建议:可以设置background-clip属性,例:

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

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

0

0 学习 · 40143 问题

查看课程