可以提供一下2-7练习的源码吗想参考一下

自己写的时候遇到几个细节的问题想参考一下完整代码理解下。

fEEl_yAo 2017-09-15

源自：CSS3背景与渐变 2-9 编程练习

收起

2回答

小丸子爱吃菜 2017-09-18 10:58:20

可以参考图片中的代码，按照你的代码给修改的。

祝学习愉快！

收起回答

提问者 fEEl_yAo 2017-09-15 18:40:42

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:500px;
            height:150px;
            border:15px solid rgba(174,87,220,0.5);
            padding:20px;
            background:url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat;
            background-clip: padding-box;
        }

        div:hover{
            background:url(http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg) no-repeat;
            background-size: cover;
            background-origin: padding-box;
            background-position: 10px 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这是我的代码图片效果hover的时候只有右边框透明下面没透明是怎么做到的。

收起回答

慕哥1161892 #1

<style> div{ width:300px; height:150px; border:15px solid rgba(174,87,220,0.5); padding:20px; background:url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat; background-clip: padding-box; } div:hover{ background:url(http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg) no-repeat; background-size: cover; background-position: 10px 20px; background-origin: content-box; } </style> 需做如下修改，修改width、padding、hover下的background-origin 需再好好理解background-clip及background-origin

2018-02-10 17:50:58