博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css背景图片位置:background的position(转)
阅读量:6978 次
发布时间:2019-06-27

本文共 1226 字,大约阅读时间需要 4 分钟。

 

position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的

1.background:url(../image/header.jpg) no-repeat left top;  /*相当于0%  0%*/
表示背景图片在指定div的位置,从左上角开始
2.background:url(../image/header.jpg) no-repeat right bottom;  /*相当于100%   100%*/
表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合
3.background:url(../image/header.jpg) no-repeat 300px 200px;   
即背景图片距div的左边界300px,距div的上边界200px。
4.background:url(../image/header.jpg) no-repeat 50% 50% ;  
/* 相当于background:url(../image/header.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示
5.background:url(../image/header.jpg) no-repeat 300px;   /*相当于300px 50%*/
若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。
6.background:url(../image/header.jpg) no-repeat -300px -100px ;
背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px

7.background:url(../image/header.jpg) no-repeat 30% 30%;  

背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。

但注意:百分比值同时应用于元素div及其背景图像。
例如:
(1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
(2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
         background:url(beijing.gif)   no-repeat  33% 66%; 
         这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。

  注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center。

转载于:https://www.cnblogs.com/lianghong/p/8320324.html

你可能感兴趣的文章
Fedora 27 命令行提示符修改
查看>>
Erlang 简易安装和卸载
查看>>
Windows Server 2012 R2 DirectAccess功能测试(3)—App2服务器安装及配置
查看>>
Shell 十三问学习笔记2
查看>>
Juniper-R&S-BGP(1):一些写在前头的基础知识
查看>>
python flaskfeng封装跨域请求头和封装json格式
查看>>
整理 iOS 9 适配中出现的坑(图文)
查看>>
17款jQuery在线QQ客服代码分享
查看>>
Linux下好用的api工具(同mac下的Dash)
查看>>
【产品日记】51CTO用户中心v1.1发布
查看>>
primesfaces入门 ,配置
查看>>
怎么用js来获取 fileupload中的上传文件的文件名。
查看>>
创建tableview
查看>>
22个所见即所得在线 Web 编辑器
查看>>
CentOS memcached安装和启动
查看>>
birt报表按字段分组后批量打印(每个字段数据一页)以及空数据显示特定字段...
查看>>
ubuntu安装oracle10G的时候界面乱码.
查看>>
尝试OUTFIle、INFILE快速导入导出数据
查看>>
“形式”系统的含义辨析
查看>>
【搜索引擎基础知识2】网络爬虫
查看>>