老师，我的问题是本节的2-18编程练习
来源：2-18 编程练习
慕斯0469344
2019-06-25 17:07:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style type="text/css">
*{
padding:0;
margin:0;
border: none;
}
/*此处写代码*/
.img1{
width:300px;
height: 90px;
margin-top: 10px;
background: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg) no-repeat;
}
.img2{
width:300px;
height: 90px;
margin-top: 10px;
background: url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg) no-repeat;
}
.img3{
width:300px;
height: 90px;
margin-top: 10px;
background: url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg) no-repeat;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</body>
</html>老师，上面的代码实现这不算是利用background属性实现的可以放置多张背景图片吧，但我试了下面的代码也不能实现。请问我的代码问题在哪里？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style type="text/css">
*{
padding:0;
margin:0;
border: none;
}
/*此处写代码*/
.img1{
width:300px;
height: 400px;
margin-top: 10px;
background: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg) no-repeat 0 0;
background: url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg) no-repeat 0 200px;
background: url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg) no-repeat 0 300px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="img1"></div>
</body>
</html>
1回答
-
同学你好，第一段代码不算是利用background属性实现的可以放置多张背景图片的效果。
第二段代码没有生效是因为书写方式不正确。不用写多个background，不然最后一个会把前面的覆盖。
代码参考：
如果帮助到了你，欢迎采纳~祝学习愉快~~
0
相似问题