老师看下代码是否可以以及我里面的注释的内容理解是否正确
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width: 500px;
height: 280px;
border: 10px solid #9999fe;
margin:100px auto; /*上下数值随意效果是水平居中*/
padding:10px;
background: url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat; /*背景图将被不会被重复或平铺*/
/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域*/
background-size: cover;
background-clip: padding-box;
}
div:hover{
background: url(http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg) no-repeat 10px 10px;/*位置定位 水平和垂直*/
background-size: cover;
background-clip: border-box;
border: 10px solid #9999fe;
background-origin: content-box; /*背景被裁剪到内容框*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
正在回答
同学你好，代码实现是正确的，注释中的理解也是对的，继续加油，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星