同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色.
1. 在 CSS 中有一个叫做 background-position: 属性, 就是专门用来控制背景图片的位置
2. 格式: background-position: 值 1 值 2;
值 1 的取值范围: left center right
值 1 代表背景图片的水平位置
值 2 的取值范围: top center bottom
值 2 代表背景图片的垂直位置
值 1 和值 2 也可以设置像素值, 来分别表示距离最左边和最上边的像素值 (注意可以接受负值, 也就是左上角就是坐标的原点, 图片的左上角就是坐标值的大小), 记住一定要带单位. 默认值为: left top
例子:
- <style>
- .box{
- height: 1000px;
- width: 1000px;
- background-image: url("image/snow.jpg");
- background-repeat: no-repeat;
- background-position: center center;
- }
- </style>
- <div class="box">
- </div>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
3. 使用方式:
我们使用背景图片, 而不是使用 img 标签, 这是因为, 当我们使用 img 标签的时候, 如果图片很大那么下面就会有滚动条, 但是这种网页是很垃圾的, 因为展示出来首页, 就是让大家看的, 加一个滚动条很不舒服. 那我们用小图片不就得了, 这其实也不行, 因为我们每个人的屏幕分辨率大小都不同, 因此需要一张较大的背景图片来解决上面的问题.
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/88079265d393