效果怎么出不来呢
<meta charset="UTF-8"> <title>background-clip</title> <style type="text/css"> .border,.padding,.content{/*给最外层的div设置样式*/ width:300px;height:300px; float:left;margin-left:50px; } a{ text-decoration:none; font-size:30px; } .div1,.div2,.div3{/*放置背景图片的div样式*/ width:220px;height:200px; border:10px solid rgba(0,255,0,0.3); padding:50px; background-image:url("http://img1.sycdn.imooc.com/climg//582c316e0001fd6507000210.jpg"); margin-top:50px; } .border:hover div,.padding:hover div,.content:hover div{ display:block; } /*补充代码*/ .div1,.div2,.div3{display:none;} .div1：hover{background-clip:border-box;} .div2：hover{background-clip:padding-box;} .div3：hover{background-clip:content-box;} </style> </head> <body> <div class="border"> <a href="">border-box</a> <div class="div1"></div> </div> <div class="padding"> <a href="">padding-box</a> <div class="div2"></div> </div> <div class="content"> <a href="">content-box</a> <div class="div3"></div> </div> </body> </html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星