老师，关于背景图片问题，帮忙解决下，我做了注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
  *{margin: 0;padding: 0;}
  .content{/*width:1903px;图片超过窗口宽度，下方会出现滑条*/width:100%/*正好能铺满窗口，但是图片左右两端会被裁切*/;height: 4033px;background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) no-repeat center top;}
  .leftad{width:224px;height:364px;background: url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png) no-repeat;position:fixed;top: 50%;margin-top: -182px;}
  .rightad{width:224px;height:364px;background: url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png) no-repeat;position:fixed;top: 50%;margin-top: -182px;right: 0px;}
</style>
</head>
<body>

<div class="leftad"></div>
<div class="rightad"></div>
<div class="content"></div>
</body>
</html>

精慕门9328699 2018-12-26

源自：CSS定位（position） 4-3 编程练习

收起

2回答

好帮手慕糖 2018-12-26 17:02:14

同学你好，这个与分辨率也有一定的关系，老师这个是用的分辨率正好的，所以图片也是可以正好显示的，不需要设置background-size属性，

同学可以在尝试使用下background-size:100%;若还是不行的话，建议：使用img标签引入图片。

希望能帮助到你，祝学习愉快！

收起回答

好帮手慕糖 2018-12-26 16:27:14

同学你好，因为背景图原图比较大的原因，建议：

（1）可以不设置背景图片，使用img标签在html中引入图片，设置图片宽度100%。

（2）可以使用background-size属性，这个是css3的属性，background-size:cover; 可以把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。例：

希望能帮助到你，欢迎采纳。

祝学习愉快！

收起回答

提问者精慕门9328699 #1

首先谢谢老师，用背景图片的方法可以解决，不过cover的方法还是部分裁切了，是不是我哪里写错了，麻烦再帮我看下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .content{/*width:1903px;*/height:4033px;background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png);background-size: cover;} .leftad{width:224px;height:364px;background: url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png) no-repeat;position:fixed;top: 50%;margin-top: -182px;} .rightad{width:224px;height:364px;background: url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png) no-repeat;position:fixed;top: 50%;margin-top: -182px;right: 0px;} </style> </head> <body> <div class="leftad"></div> <div class="rightad"></div> <div class="content"></div> </body> </html>

2018-12-26 16:41:28