html图片定位坐标原点,利用CSS定位背景图片的常用方法总结
前言
大家在网上最常见的一种方案就是在父元素中relative,然后子元素absolute。这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱。本文先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案。
1.无依赖的absolute定位
在网络上,对absolute存在这样一个误解,认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能认为是错的,只能说对定义没有完全认识。在W3C文档中是这样定义absolute的:
生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过'left' , 'right' , 'bottom' , 'top' 属性进行规定。
对这句话的理解应该如下(L : left,R:right,B:bottom,T:top)
a:当给一个元素设置position:absolute之后,如果父元素没有设置position:relative,则该元素是通过LRBT依据可视窗口区域的左上角进行定位;如果父元素设置了position:relative,则该元素是通过LRBT依据父元素容器的左上角进行定位。
b:在生成绝对定位的元素时,不管父元素是否设置了position:relative,使用margin-top , margin-left , margin-right , margin-bottom其中的两个非相反方向进行定位,其效果会像相对定位relative一样,根据自身位置进行定位。但是使用margin定位与relative唯一的区别就是,absolute脱离文档流,原来的物理空间已经消失,而relative没有脱离文档流,原来的物理空间依然占据。
所以,可以使用无依赖relative的absolute进行定位,定位方法是使用margin,而不能使用LRBT。
代码如下:
复制代码代码如下:
复制代码代码如下:
.keith {
margin: 2em;
width: 5em;
height: 5em;
background: lightgreen;
}
.keith .main {
position: absolute;
background: url("../images/my-icons/Loginicon.png") scroll no-repeat 0 0;
width: 21px;
height: 21px;
margin-left: calc(5em - 25px);
margin-top: calc(5em - 25px);
}
上面代码中,使用margin-left , margin-top 与 position:absolute来对图片进行定位。使用了CSS3中的calc()来计算需要定位的值。
示例图片如下:
2.background-position扩展语法
在CSS3背景与边框中,background-position属性已经得到扩展,它允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字即可。
代码如下:
复制代码代码如下:
复制代码代码如下:
.keith{
margin:2em;
width:5em;
height:5em;
background:lightgreen url('../images/my-icons/Loginicon.png') scroll no-repeat ;
background-position:right 5px bottom 5px;
};
上面代码中,使用background-position扩展语法即可实现距离右下角5px距离的定位。
3.background-origin定位
background-origin是CSS3中新增的属性,主要用来决定background-position属性的参考原点,即决定背景图片定位的起点。在默认情况下,背景图片的background-position属性总是以元素左上角为坐标原定对背景图片进行背景定位。
background-origin有三个属性值content-box , padding-box(默认值) , border-box 。
看看如何使用这个属性来对背景图片进行右下角5px的定位,代码如下。
复制代码代码如下:
复制代码代码如下:
.keith {
margin: 2em;
width: 5em;
height: 5em;
padding: .5em;
background: lightgreen url("../images/my-icons/Loginicon.png") scroll no-repeat;
background-position: right bottom;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
上面代码中,给盒子设置了padding值。使用box-sizing属性来调整div在浏览器下的盒模型为IE盒模型,border-box的意思是总宽度=content area + padding + border 。这里给background-origin属性设置了content-box,可能大家会不太理解,为什么不是padding-box。看一个火狐下的截图。
上面图片中,黄色区域的是margin,紫色区域的是padding,浅蓝色区域的是content-area。如果给元素设置了padding-box,那么此时图片会定位在右下角,与右下角没有任何空间。所以此时要使用content-box进行定位。最终的效果如下。
4.calc()定位
如果我们希望通过内容来撑开容器的宽度和高度时,而不去固定高度和宽度时,这时需要使用calc属性+background-position属性结合使用,来对图片进行定位。因为这时候并不知道容器的高度和宽度,只能有100%来进行计算。
复制代码代码如下:
这是一段文字,用于撑开容器。
复制代码代码如下:
.keith{
margin:2em;
padding:2em;
display:inline-block;
background:lightgreen url('../images/my-icons/Loginicon.png') scroll no-repeat;
background-position:calc(100% - 5px) calc(100% - 5px);
}
示例图片如下:
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。
html图片定位坐标原点,利用CSS定位背景图片的常用方法总结相关推荐
- 利用CSS设置背景图片不显示的问题
用CSS写背景图片,background-image:url("1.jpg"); 但是一直都不显示图片,只有原本写好的div的边框. 一般不显示都是路径写错的问题,(图片的相对路径 ...
- 利用css将背景图片铺满整个屏幕
方法一: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta ht ...
- html 图片透明字不透明,CSS实现背景图片透明,文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- 利用css 把背景图片全屏铺满
1.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- 利用CSS定位背景图片
又如: 这些小图片就是整图分割后的各个部分,把各个部分放在一张图片上,而不是是分别存储成单独的图片,其目的我们都知道,就是减少http请求次数,节省时间和带宽. 那么怎么来实现一张图片在不同的地方只显 ...
- HTMLCSS——利用CSS定位背景图片 background-position
我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 又如: 这些 ...
- html里如何定位背景图片,Html+Css CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
最新文章
- JSON.parse(text[, reviver])
- carsim8.02和matlab2016b的联合仿真,找不到carsim s-function的解决办法
- php prism,漂亮的代码语法高亮库:Prism.js
- AWS 基础服务学习
- POJ2114-Boatherds-树分治
- 前端学习(561):解决margin重叠第二种情况父子
- Appium+Python移动端(Android)自动化测试环境搭建原来没有那么难!+ 带你实战去
- java 时间处理经典案例
- 《编码规范和测试方法——C/C++版》作业 ·008——编写一个符合依赖倒置原则的简单学生管理系统
- centos nginx不是命令_Linux使用yum安装nginx服务教程
- python类的继承代码_python--类的继承
- win10读取linux硬盘,win10怎么读取lxext4格式硬盘
- 无线专题 路由器和交换机、光猫的区别
- 华为服务器设置raid0为系统盘,服务器设置raid0
- 启动kafka报错ERROR Fatal error during KafkaServer startup. Prepare to shutdown ,找到原因就要可以解决
- centos6添加系统服务
- 历时三年“鸽王”Filecoin主网上线,分布式存储市场将迎来最强劲敌?
- clip-summary
- Excel:一个Excel自动计算公式,一个Excel手动计算?多进程
- java8,java9和java11的特性和区别!