CSS| background_属性总结
Property List
属性 | 描述 | CSS |
---|---|---|
background | 在一个声明中设置所有的背景属性。 | 1 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-color | 设置元素的背景颜色。 | 1 |
background-image | 设置元素的背景图像。 | 1 |
background-position | 设置背景图像的开始位置。 | 1 |
background-repeat | 设置是否及如何重复背景图像。 | 1 |
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
从表格中,我们可以看出 background-clip ,background-origin和 background-size是css3中新增的属性。
background:
简写方式:
background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
不设置的属性可以省略。
例:
.bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font-size:0px; overflow:hidden;}
.cBot{background:url(../images20130624/sohubg01.png) 0 -181px repeat-x;width:758px;height:6px;clear:both;font-size:1px;margin:0 auto;}
1) background-attachment
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
scroll | 背景图片随页面的其余部分滚动。这是默认 |
fixed | 背景图像是固定的 |
inherit | 指定background-attachment的设置应该从父元素继承 |
2) background-color
background-color 设置背景颜色
值 | 描述 |
---|---|
color | 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。 |
transparent | 指定背景颜色应该是透明的。这是默认 |
inherit | 指定背景颜色,应该从父元素继承 |
- 十六进制颜色: 指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。
- RGB颜色: RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。
- RGBA颜色: RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
- HSL色彩: 色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。 例:background-color:hsl(120,65%,75%);
- HSLA颜色: 指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。 例:background-color:hsla(120,65%,75%,0.3);
3) background-image:url('URL') | none | inherit
background-image属性设置一个元素的背景图像。
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。
例:
body{
background-image:url('paper.gif');
background-color:#cccccc;
}
4) background-position
background-position属性设置背景图像的起始位置。
left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字,其他值将会是"center" |
x% y% | 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% |
xpos ypos | 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions |
inherit | 指定background-position属性设置应该从父元素继承 |
5) background-repeat
设置如何平铺对象的 background-image 属性。
值 | 说明 |
---|---|
repeat | 背景图像将向垂直和水平方向重复。这是默认 |
repeat-x | 只有水平位置会重复背景图像 |
repeat-y | 只有垂直位置会重复背景图像 |
no-repeat | background-image不会重复 |
inherit | 指定background-repea属性设置应该从父元素继承 |
6) background-clip:border-box | padding-box | content-box | no-clip
用来确定背景的裁剪区域。
作用:CSS3中的Background-clip属性,其主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景显示区域
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background,但有一点需要注意,background-color是从元素的边框左上角起到右下角止,
而background-image却不一样,他是从padding边缘的左上角起而到border的右下角边缘止,如果大家对上面那句话不太好理解的话,我们一起来看一个简单的Box Model加上边框和背景色,背景图片的示意图
7) background-origin:padding-box | border-box | content-box;
background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像background-attachment是"固定",这个属性没有任何效果。
值 | 描述 |
---|---|
padding-box | 背景图像填充框的相对位置 |
border-box | 背景图像边界框的相对位置 |
content-box | 背景图像的相对位置的内容框 |
background-origin与background-clip的最根本的区别就是:background-clip 是对背景图片的裁剪,background-origin是对背景图片设置起始点。对于background-clip, 其关键字是指将背景图片以border的尺寸、
以padding的尺寸,以content的尺寸进行切割,其得到的结果是不完整的背景,也就是其中的一部分(原理与截图差不多)。而且有一点要注意,background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。
对于background-origin,其关键字是指将背景图片放置到border范围内,padding范围内、content范围内,其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是,它只是单纯设置背景图
片的边界,并不会对背景颜色造成影响
8) background-size: length | percentage | cover | contain
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
CSS| background_属性总结的更多相关文章
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- 【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- Normalize.css:优化重置CSS默认属性
Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...
随机推荐
- css box-reflect投影实例讲解
box-reflect一共有以下几个属性: above: 指定倒影在对象的上边 below: 指定倒影在对象的下边 left: 指定倒影在对象的左边 right: 指定倒影在对象的右边 offset: ...
- SSM整合(1): spring 与 springmvc 整合
久没有写博客了, 今年事情太多了, 也没了心思. 去深圳出差, 更重要的结婚的事情, 一茬接一茬. 好在最近闲暇一些, 就想记录一些曾经困扰过我的问题(现在用spring boot真是太方便了, 很 ...
- screen 实战后台命令执行备份
一.安装 [root@vmware ~]# yum install -y screen 二.直接在命令行键入 screen 命令 [root@vmware ~]# screen 三.暂时终端会话 那么 ...
- WPF设置控件获取键盘焦点时的样式FocusVisualStyle
控件获取焦点除了用鼠标外,可以通过键盘来获取,比如Tab键或者方向键等,需要设置控件获取键盘焦点时的样式,可以通过设置FrameworkElemnt.FocusVisualStyle属性, 因为几乎所 ...
- python3.X出现关于模块(i18n)的不能使用的解决方法
今天在看python编程从入门到实践的时候,遇到了 如下问题 ModuleNotFoundError: No module named 'pygal.i18n' 然后查找文献找到一个网友 的解决 ...
- 浅析Java源码之HashMap外传-红黑树Treenode(已鸽)
(这篇文章暂时鸽了,有点理解不能,点进来的小伙伴可以撤了) 刚开始准备在HashMap中直接把红黑树也过了的,结果发现这个类不是一般的麻烦,所以单独开一篇. 由于红黑树之前完全没接触过,所以这篇博客相 ...
- [转]How to speed up Magento 2. Maximum Performance
本文转自:https://magedirect.co/how-to-speed-up-magento-2-maximum-performance/ Introduction In this artic ...
- Lightning Chart 8.4版新功能
LightningChat V8.4版在如下功能上做了改进 边距 缩放功能 Legend box 的自动定位 正投影 相机orientation与rotation系统 全新3D 坐标空间转换器 Poi ...
- WebForm 【复合控件】
一 复合控件(取值,赋值用法相近) RadioButtonList --单选按钮 (一组列表) <asp:RadioButtonList ID="RadioButtonL ...
- 数据结构:IO读写频繁的青睐,B树和B+树
目录 B树 定义及特性 查找顺序 保持平衡 B+树 B+树的插入 使用场景 参考 今天学习B树和B+树,B树和B+树都是基于二叉树的衍生,对于二叉树不太了解的读者可以翻看<数据结构:二叉树> ...