CSS属性总结之background
最近在学习css3的一些新属性,就把一些使用中遇到的方法和问题做一个小结。
background-color
背景颜色在IE7之前只显示到padding区域,不包含border。而现代浏览器background-color都是从border的左上角,到border的右下角。
background-color: rgba(0,255,0,0.5);
background-image
背景图图有几种情况:默认情况下(repeat),会从border区域开始布满,当然也包含了border区域;
当设置为no-repeat时,是从padding的左上角到border的右下角;
背景图图应用:
logo中添加用于SEO的文字
html结构是:h1>a,a中的文字用于搜索,再讲a转块,转块之后就可以设置宽高,这样就可以看到后面加的背景图图了,宽高就等于背景图图的宽高,但是搜索的文字会覆盖在背景图上,使用text-indent给a一个-999px的值让文字出去很远很远的位置,再给a一个overflow:hidden就可以把文字切掉了。当然,也可以将文字的font-size设为0,但是在IE6、7下会出现不兼容问题,有一小条文字在图图上,so用text-indent就好了。
padding区域挤出用来放背景图
这种方法加图图,通常是这个图图并不重要,主要用于修饰的时候,重点在文字部分。
为什么要加在padding呢?当想放一张图图在盒子中,通常是在no-repeat情况下,那么no-repeat时图图可以到padding区域,但是width是用来写文字的,so就只能加在了padding,具体加在top还是left看具体情况而定。
注意:要设置背景图,那么盒子必须要有一个宽高,如果是行内那就先转块,如果是浮动的那就先清除浮动(清除浮动方法再另外总结)。
在CSS3中可以重复填写url()实现多背景,既可以这样写
background-image: url(), url();
background-position: right bottom, left top;复制代码
还可以写成综合样式:
background: url() right bottom, url() left top;
复制代码
新属性: background-clip
可以控制背景图图和背景颜色的绘制范围。
:content-box,此时color和image只出现在内容区域(width),不会扩展到padding,更加到不了border了;:padding-box,此时color和image只出现到padding区域,在padding以内绘制;:border-box,看名字就知道可以绘制到border了。
复制代码
background-clip应用举例:
在导航栏中,鼠标经过时不看到切换状态的变化,同时在视觉上分隔每个li的链接,使用padding-box声明,让背景色只到padding,然后给border设置为transparent(为了显示后面的其他实色)也可以设置颜色给border,这样后面的页面透过边框可见。
.multi_drop_menu li a { display:block;border-right-style:solid;Background-clip:padding-box;Text-decoration:none;Color:#555;Background-color:#eee;Border-width:3px;Border-color:transparent;
}
复制代码
插播一个background-origin:属性值和background-clip一样有三个,分别表示背景图的原点在content、padding和border区域。
background-position
默认情况下是left top;居左上对齐,此时如果是no-repeat图图就只在左上位置,如果是repeat那会以左上顶点为原点向各个方向重复展开;通过设置位置来居左、中、右对齐,center center是以中心为原点,如果no-repeat那么图图就居中,repeat就会以最中心的图图为原点向各个方向展开来。 特殊情况是当背景图片的size大于盒子的边界,还是可以设置对齐位置,但是此时image不论是否设置了no-repeat都会扩展到border下面。
应用在body或盒子的大背景,position:center top;
banner通栏,width:100%; position:center top;
像素表示法:两个属性值都是用px为单位的数值表示。
- 第一个值:数值是几,表示图片的左上角距离border以内的左上角,水平位移多少距离。
- 第二个值:数值是几,表示图片的左上角距离border以内的左上角,垂直位移多少距离。
像素表示法的两个属性值区分正负,正负值表示移动的方向不同。
- 正数:图片的左上角相对于盒子border以内的左上顶点,向右、向下移动。
- 负数:图片的左上角相对于盒子border以内的左上顶点,向左、向上移动。
像素定为法可以应用在sprite图图找图上,所以,怎么摆放精灵图就是一件要提前算计好的了,如果盒子在页面左边,那在sprite里面放在右边,这样右边宽一些也不会有其他图图出现,相反盒子在页面右边就放在sprite的左侧。
还有一种百分比的表示方法,
- 0% 0%相当于left top;50% 50%相当于center center;
- 100% 100%相当于将图图右下角对齐到了border内侧的右下角。一种简单的计算方法就是找出100% 100%对应的像素值,其他值再按照百分比计算出像素值再去定位,100%=盒子width + paddind - 图图width
注意: 修改background属性时,使用单一属性层叠,若使用综合属性则其他属性不变,只改变需要修改的,在使用综合属性时,要特别注意position后面两个值得顺序!
background-attachment :
scroll
fixed
复制代码
设置背景图是否随着页面滚动而滚走,默认scroll随着盒子滚动跟着走,fixed不随着滚,永远固定在浏览器窗口的某个位置,注意在小盒子内部使用fixed定位之后,参考点将从border的内左上点,变成浏览器窗口的左上顶点,,此时上面框里面的背景图相对于browser的左上顶点定位,页面滚动他也不后跟着滚,如果第一个box滚上去出了页面,那么图图也将被其他盒子挡住了,因为背景图就是在盒子下层在背景色上层的。
新属性:background-image 背景图渐变
渐变分两种,linear-gradient (线性渐变)和 radial-gradient (放射性渐变,从一点向四周发散)。
- background:linear-gradient(red,blue); 背景颜色从红色到蓝色的渐变;
- background:linear-gradient(to right,red,blue); 背景颜色从红色到蓝色的渐变;
- background:linear-gradient(-45deg,red,blue); 背景颜色把起点从默认的中上设定到了左上。
比如淘宝搜索框的渐变色:
.search ul li.active a{background: linear-gradient(to right, #FF8F00, #FF5300);color: #fff;font-weight: bold;border-radius: 5px 5px 0 0;}
复制代码
新属性:background-size
背景尺寸是CSS3规定的属性,用来控制背景图图的size:
- 50%:缩放图图,让图图填充背景区的一半;
- 100px 50px; 把图图调整到固定的宽高;
- cover;拉大图片,让图图完全填满背景区,保持宽高比;等价于background-size: 100% auto;
- contain;缩放图图,让图图恰好适合背景区,保持宽高比。等价于background-size: auto 100%;
注意不要把图图拉的太大,会造成失真!
应用举例:在精灵图中想要放大或者缩小其中某一个图
将容纳背景图的盒子的宽高相应的x2,同时,背景定位的位置值x2,背景size也同时x2,即可实现精灵图中选中的图放大两倍效果。 如果只是直接应用backg-size只会改变背景图也就是整张精灵图的size。
转载于:https://juejin.im/post/5a3c6888f265da433470181b
CSS属性总结之background相关推荐
- css里td自带什么属性,关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- css超过两行显示为..._使用这些不太常用的CSS属性,布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...
- css属性pointer-events
绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发. 现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-e ...
- 常见的CSS属性和值CascadingStyleSheets
字体 文本 背景 位置 边框 列表 其他 CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等, ...
- 050_学习的CSS属性
1. 尺寸属性(Dimension) height: 设置元素高度. max-height: 设置元素的最大高度. max-width: 设置元素的最大宽度. min-height: 设置元素的最小高 ...
- css不换行属性_那些不常见,但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
最新文章
- Blender全流程制作真实感3D产品学习教程
- Python装饰器是什么?使用Python装饰器实现计算程序(函数)运行时间的功能
- 教你一步一步用C语言实现sift算法、上
- Java程序转成exe可执行程序方法和exe4_j下载地址和破解。
- 如何用c 语言编写阶乘程序,求10000的阶乘(c语言代码实现)
- 关于Django路由层简单笔记
- 【bzoj3224】普通平衡树——treap
- 实现props的双向绑定
- 苹果电脑 不能使用服务器发送邮件,解决Mac上无法使用的邮件问题的技术
- Vue mixins学习
- protobuf java service_【java】protoc不生成.proto中的service,只生成model相关类,求助。...
- Linux编程(7)_gdb
- 强悍的 Linux —— tar.xz 文件的解压
- 逻辑斯蒂回归:家庭买私家车的概率
- UIDatePicker 显示时间和打印时间不一样
- 移动端UML图应用之UML图简述
- tiff文件读写等操作(多帧tiff图像保存成的.tif文件)
- 抖音上最火的七个Excel视频教程专栏,利用休闲时间也能成为Excel高手。
- 加速区块链改革促进区域经济转型升级 ——中国·平泉负氧离子产业园正式落成
- 电信物联卡稳定的apn接入点_0月租的电信纯流量卡怎么样?
热门文章
- scrapy框架-post使用
- 基于上下文的rpn_构建事物-产品评论视频中基于上下文的情感分析
- ui边框设计图_UI设计形状和对象基础知识:填充和边框
- 前端,校招,面淘宝,指南
- 手写一个合格的前端脚手架
- 面试体验:Facebook 篇(转)
- 通过项目逐步深入了解Mybatis(四)
- python实习生面试题_大数据分析实习生面试题库
- docker wsl2启动不了_Docker学习笔记
- SparkSession.read().csv()无法定位本地文件的问题