CSS 的 background 属性
来源:互联网 发布:宁波畅想软件 编辑:程序博客网 时间:2024/05/19 14:01
正如我之前所说,文档树中的每个元素都是一个方盒。每个盒都有背景层,它可以是完全透明的、有颜色的或一张图片。背景层由 8 个 CSS 属性(和 1 个简写属性)控制。
background-color
background-color 属性设置元素背景颜色。它的值可以是一个合法的颜色值或 transparent 关键字。
.left{ background-color: #ffdb3a; }.middle{ background-color: #67b3dd; }.right{ background-color: transparent; }
背景颜色绘制在由 background-clip 属性指定的盒模型区域内。如果同时设置了背景图片,颜色层会在它们后面。不像图片层可以设置多个,每个元素只拥有一个颜色层。
background-image
background-image 属性为元素定义一个(或多个)背景图片。它的值通常是用 url() 符号定义的图片 url。 none 也是允许的,它会被当做空的一层。
.left{ background-image: url('ire.png'); }.right{ background-image: none; }
我们也可以指定多个背景图片,用逗号隔开。沿着 z 轴从前向后依次绘制每个图片。
.middle{ background-image: url('khaled.png'), url('ire.png'); /* Other styles */ background-repeat: no-repeat; background-size: 100px;}
background-repeat
在 background-size 指定大小和 background-position 指定位置后, background-repeat 属性控制如何平铺背景图片。
属性值可以是以下关键字之一: repeat-x 、 repeat-y 、 repeat 、 space 、 round 、 no-repeat 。除了前两个( repeat-x 和 repeat-y )之外,其他关键字可以写一次来同时定义 x 轴和 y 轴,或分开定义两个维度。
.top-outer-left{ background-repeat: repeat-x; }.top-inner-left{ background-repeat: repeat-y; }.top-inner-right{ background-repeat: repeat; }.top-outer-right{ background-repeat: space; } .bottom-outer-left{ background-repeat: round; }.bottom-inner-left{ background-repeat: no-repeat; }.bottom-inner-right{ background-repeat: space repeat; }.bottom-outer-right{ background-repeat: round space; }
background-size
background-size 属性定义背景图片的大小。它的值可以是一个关键字、一个长度或一个百分比。
属性可用的关键字是 contain 和 cover 。 contain 会按图片比例将其放大至宽和高完全适应区域,与之相反, cover 会将图像调整至能够完全覆盖该区域的最小尺寸。
.left{ background-size: contain; background-image: url('ire.png'); background-repeat: no-repeat;}.right{ background-size: cover; /* Other styles same as .left */}
对于长度值和百分比,我们可以用来定义背景图片的宽高。百分比值根据元素的尺寸来计算。
.left{ background-size: 50px; /* Other styles same as .left */ }.right{ background-size: 50% 80%; /* Other styles same as .left */ }
background-attachment
background-attachment 属性控制背景图片在可视区和元素中如何滚动。它有三个可能的值。
fixed 意思是背景图片相对于可视区固定,即使用户滚动可视区时也不移动。 local 意思是背景在元素中位置固定。如果元素有滚动机制,背景图片会相对于顶端定位,当用户滚动元素时,背景图片会离开视野。最后, scroll 意思是背景图片固定,不会随着元素内容滚动。
.left { background-attachment: fixed; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; overflow: scroll;}.middle { background-attachment: local; /* Other styles same as .left */}.right { background-attachment: scroll; /* Other styles same as .left */}
background-position
这个属性,结合 background-origin 属性,定义了背景图片起始位置。它的值可以是一个关键字、一个长度或一个百分比,我们可以依次定义 x 轴和 y 轴的位置。
可用的关键字有 top 、 right 、 bottom 、 left 和 center 。我们可以任意组合使用,如果只指定了一个关键字,另一个默认是 center 。
.top-left { background-position: top; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat;}.top-middle { background-position: right; /* Other styles same as .top-left */}.top-right { background-position: bottom; /* Other styles same as .top-left */}.bottom-left { background-position: left; /* Other styles same as .top-left */}.bottom-right { background-position: center; /* Other styles same as .top-left */}
对于长度值和百分比值,我们也可以依次定义 x 轴和 y 轴的位置。百分比值与容器元素相关。
.left{ background-position: 20px 70px; /* Others same as .top-left */ }.right{ background-position: 50%; /* Others same as .top-left */ }
background-origin
background-origin 属性定义背景图片根据盒模型的哪个区域来定位。
可用的值有 border-box ,图片相对于边框(Border)定位, padding-box ,图片相对于内边距框(Padding)定位, content-box ,图片相对于内容框(Content)定位。
.left { background-origin: border-box; background-size: 50%; background-image: url('ire.png'); background-repeat: no-repeat; background-position: top left; border: 10px dottedblack; padding: 20px;}.middle { background-origin: padding-box; /* Other styles same as .left*/}.right { background-origin: content-box; /* Other styles same as .left*/}
background-clip
background-clip 属性决定背景绘制区域,也就是背景可以被绘制的区域。像 background-origin 属性一样,它也基于盒模型。
.left{ background-clip: border-box; background-size: 50%; background-color: #ffdb3a; background-repeat: no-repeat; background-position: top left; border: 10px dotted black; padding: 20px;}.middle{ background-clip: padding-box; /* Other styles same as .left*/}.right{ background-clip: content-box; /* Other styles same as .left*/}
background
最后, background 属性是其他背景相关属性的简写。子属性的顺序并没有影响,因为每个属性值的数据类型不同。然而,对于 background-origin 和 background-clip 属性,如果只指定了一个盒模型区域,会应用到两个属性。如果指定了两个,第一个设置为 background-origin 属性。
- css的background属性
- css的background 属性
- CSS的background属性
- CSS 的 background 属性
- css background属性的使用方法
- [CSS]CSS background属性
- css中的background的几个属性(background-attachment/background-origin,background-clip等)
- CSS的background属性的缩写顺序
- CSS的背景图像属性background
- CSS 中background-img 的相关属性
- CSS中背景的综合属性background
- css中background属性的用法
- CSS中background-size的cover属性
- CSS中的background的详细属性
- css 背景属性background的使用方法
- CSS中的background的详细属性
- css background的多种属性详解
- CSS background-position 属性
- 求组合数
- 重写equals和hasCode 方法 JDK1.7
- juery实现ul li标签切换
- angular2子组件的事件传递(任意组件事件传递)
- 实验2 运算器的编程实现
- CSS 的 background 属性
- NetRipper源码
- c语言的变量存储方式
- robots协议
- 算法题--大数据取最大前几个
- 广东省成人高考录取流程
- php开发笔记(七)用数组函数实现生成随机字符串
- LNMPA中php无法获取$_SERVER['HTTPS']的解决方法
- B-树和B+树的应用:数据搜索和数据库索引