背景图片的显示方式
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>背景</title>
<style>
/*此处写代码*/
div{background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
width:2650px;
background-repeat:no-repeat;
height:2050px; text-align:center;
font-size:18px; line-height:30px;
padding-top:300px; margin:0 auto;
font-weight:bold; border:1px solid red;
background-attachment:fixed;
}
</style>
</head>
<body>
<div>
《长歌行》<br>
<br>青青园中葵，朝露待日晞。
<br>阳春布德泽，万物生光辉。
<br>常恐秋节至，焜黄华叶衰。
<br>百川东到海，何时复西归。
<br>少壮不努力，老大徒伤悲。
<br>
</div>
</body>
</html>
老师，我在这个案例中添加了 background-attachment:fixed;样式，显示效果图片始终在页面最左面，但是div是相对于页面居中的啊，背景图片也属于div啊，为什么当div宽width变小时背景图片就不显示了
正在回答
你好同学 , background-attachment:fixed;是相对于浏览器视口进行定位的 .设置此属性之后 , 背景图会一直固定在视口固定的位置上 , 不会随着页面的滚动而滚动了 . 针对这个属性 ,同学在自己重新回顾一下 视频 .
另外 ,背景图片本身是给div设置的 ,div宽度变小 ,显示背景图的区域自然就会变小 .但是不会因为宽度变小就不显示了 .当div宽度为0时 , 盒子没有了 , 背景图才会不显示 .
希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星