当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}
.box1 {
background-position:0% 0%;
}
.box2 {
background-position:0% 33.33333%;
}
.box3 {
background-position:0% 66.66666%;
}
.box4 {
background-position:0% 100%;
}
|
第二和第三个方块的设置，并不是一般想象中的"0% 25%"和"0% 75%"。
不过说实话，这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于，当页面缩放的时候，背景图片也会跟着一起缩放。
（学习视频分享：css视频教程）
以上就是css如何设置背景图片位置的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css之简单的响应式的实现
css文件中如何引入另一个css文件？（代码示例）
css三种颜色写法是什么
css阴影边框怎么设置
css 页面显示不全怎么办
css怎么设置字体位置
css怎么设置行距
值得收藏的css性能优化方法
2021css常用代码大全
css animation-fill-mode属性怎么用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css如何设置背景图片位置
