关于CSS设置页面背景图的一些疑问
2024-10-18 17:19:59
关于背景图片的位置其background-position设置背景图片的位置有两种方式,一种是是根据像素设置,第二种根据百分比设置,第一种根据像素的位置是很简单的,只是关于百分比这个设置理解特别容易出现偏差的,先看看一段简单的代码:
.bg-position{
background:url(../../public/images/404.jpg) no-repeat;
margin-top:100px;
margin-left:100px;
background-color:#ccc;
height: 500px;
width: 800px;
background-position: 100px 100px;
}
这种情况是可以预见的,如下所示:
网上看了一篇文章说是background-position是依赖于no-repeat的,在repeat的状态下和默认的状态下(默认即为repeat),background-position是不起作用的,因此自己尝试了一把,看了一下效果:
代码中去掉了no-repeat,同样是可以展示,以前repeat的时候没有注意和background-position结合一起,不过现在发现设置background-position之后,我们不断的调整垂直方向的距离,发现所有的位置变动都是根据正中间的全部显示的图片的位置进行调整,有兴趣的可以尝试一下~
我们将background-position设置为20% 20%,代码如下:
.bg-position {
background: url(../../public/images/404.jpg) no-repeat;
margin-top: 100px;
margin-left: 100px;
background-color: #ccc;
height: 500px;
width: 500px;
background-position: 20% 20%;
}
最开始我以为是最开始的图片位置一样,500*0.2=100,但是事实上却不是这样:
这个百分比不是根据div的宽度来绝对的,而是根据div宽/高和图片的宽/高的差值来决定的:
position-x=(容器宽度-图片宽度)*百分比
position-y=(容器高度-图片高度)*百分比
这样就会理解上图出现的问题,如果想更好的理解一下可以理解图片的20%的点和容器在20%所在的点重合~
最新文章
- C语言学习 第四次作业总结
- DataGridView中实现checkbox全选的自定义控件
- Objective-C_基本数据类型详解
- 本地MVC项目发布到IIS服务器
- 数据可视化(1)--Chart.js
- silverlight 4 tools for vs2010无法在vs2010 SP1上安装的解决办法
- face mask in opencv
- 100 open source Big Data architecture papers for data professionals
- linux自启动服务方式
- 两款web api 调试工具
- Sort it all out
- 【redis】windows
- 让ECSHOP模板支持转smarty时间戳
- MySql自动备份shell
- 网站robots.txt &; sitemap.xml
- 音频格式RAW和PCM区别和联系
- zabbix教程
- Centos7.5.1804永久生效修改主机名
- PHP从入门到精通(六)
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
热门文章
- druid yml
- D. Colored Boots(STL)
- Spring Cloud服务消费者(rest+ribbon)
- mysql按表字段内容长度排序
- 转载【docker】CMD ENTRYPOINT 的使用方法
- Office 365 的安装方法
- 吴裕雄--天生自然Android开发学习:1.2.1 使用Eclipse + ADT + SDK开发Android APP
- 简单的文件上传服务器(上传到FastDFS服务器)
- ./config\make\make install命令详解
- Android开发之《ffmpeg解码mjpeg视频流》