CSS中background用法
来源:互联网 发布:vmware软件购买 编辑:程序博客网 时间:2024/05/16 17:55
background简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如
background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用background这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
background-color:规定要使用的背景颜色。
语法:background-color:<color>;
background-position:属性用于控制背景图片在元素中的位置。这个位置指定的是图片左上角相对于元素左上角的位置。
语法:background-position:长度值/百分比值/top/left/bottom/right/center;
例子:background-position:left top;
可以看到上面的示例中,background-position的取值是两个,前一个代表横向位置的值(即X轴坐标),后一个是纵向位置的值(即Y轴坐标)。两个取值之间使用空格分开。
默认值是 0% 0% (即左上角位置)
但是如果你仅仅设置了一个关键词,那么第二个值是“center”
如果你仅仅设置了一个百分比值,那么第二个值是“50%”
值得注意的一点是,百分比的参照物不是容器本身,也不是背景图片本身,而是容器的宽度减去背景图片的宽度。
示例:
注: 本文中使用的图片大小为 300px*120px,为了能很清晰的表达图形的哪部分被隐藏了,按照图片的大小平均分成了9等份。同时背景图片容器区域绘制出绿色边框清晰显示容器的范围。
1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}
效果如下图1:
图 1
2、该属性定位不受对象的补丁属性( padding )设置影响。
例如,我们给容器元素增加padding值,背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}
效果如图2:
图 2
3、background-position:-70px -40px;
图片以容器左上角为参考向左偏移70px,向上偏移 40px,示例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
border:5px solid green;
}
效果如图3:
图 3
4、background-position:70px 40px;
图片以容器左上角为参考向右偏移70px,向下偏移 40px,示例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
border:5px solid green;
}
效果如图4:
图 4
5、background-position:50% 50%;
图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
例如: .container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
border:5px solid green;
}
其x=(300-210)*50%=45px;
y=(150-120)*50%=15px;
效果如图5:
图 5
由于超出部分别往两端延伸,所以我们可以先制作一张宽度足够宽图片设置水平值为50%,这样可以用来适应不同的浏览器,使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。
6、background-position:-50% -50%;
等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
border:5px solid green;
}
效果如图6:
图 6
7、background-position:100% 100%;
图片处于容器元素的右下角,与 background-position:right bottom;效果等同。
示例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
border:5px solid green;
}
效果如图7:
图 7
background-size:规定背景图片的尺寸。
语法:background-size: [length|percentage]{1,2}|cover|contain; 默认值是auto
length和percentage都是用来设置背景图片的宽度和高度的,第一个值是宽度,第二个值是高度,如果只有一个值,那么第二个值默认为“auto”。
cover:是背景图片尽可能的小,但是又不能小于容器。
contain:是背景图片尽可能的大,能最大在容器中显示出来。
background-repeat:设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
语法:background-repeat:repeat-style [ , repeat-style ]*
repeat-style= repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
默认值:repeat
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向上平铺
repeat: 背景图像在横向和纵向平铺
no-repeat: 背景图像不平铺
round: 背景图像自动缩放直到适应且填充满整个容器。写本文档时仅Chrome,Safari,Opera支持该参数值
space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。写本文档时仅Chrome,Safari,Opera支持该参数值
如果提供2个参数,则第1个用于横向,第2个用于纵向。
如果提供1个参数,则既用于横向也用于纵向。(repeat-x 和repeat-y 除外,因为repeat-x相当于提供了,repeat no-repeat2个参数。)
background-origin属性规定 background-position 属性相对于什么位置来定位。
语法:background-origin: padding-box|border-box|content-box; 默认值为:padding-box
background-clip 属性规定背景的绘制区域。
语法:background-clip: border-box|padding-box|content-box; 默认值为:border-box
background-clip和background-origin的区别
background-clip:border|padding|content
该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
background-origin:padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
<attachment>=scroll | fixed | inherit 默认值:scroll
scroll背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
可能的值有:url none inherit
url('URL') 指向图像的路径。
none 默认值。不显示背景图像。
inherit 规定应该从父元素继承 background-image 属性的设置。
值得注意的是,引入背景图片的时候,先引入的在上一层,后引入的在下一层。
而设置的背景颜色backgro-color永远在最后一层。
- CSS中background用法
- css中background属性的用法
- CSS background-position用法
- CSS中背景background
- CSS中 -gradient && background
- CSS中的background用法探讨
- CSS精灵 background-position用法
- CSS中background-position详述
- css中background-size属性
- CSS中background属性详解
- 表格背景(Background)图像CSS用法详解
- CSS背景(background)的基本用法
- CSS background-position 背景定位的用法
- css中background-position:的属性值为百分比时的用法
- 学习CSS中background-position的使用方法
- CSS中background-position使用技巧
- css中background-images路径问题解答
- css中background url不显示图片
- How to set a badge value on a UITabBarController item
- 重构的认知(一)
- css中为什么经常见到img{dispaly:block}?
- 关于HTML标签的总结
- linux以rpm方式安装ftp软件
- CSS中background用法
- text-align:center和margin:0 auto的用法和区别
- CSS的定位元素position用法
- CSS中float布局用法
- Java构造方法的应用
- css中消除浮动有哪些方式?
- flex的用法分析
- OpenACC与OpenHMPP的一点区别
- C++学习笔记:对文件流的写入和读取