首页 技术 正文
技术 2022年11月19日
0 收藏 652 点赞 5,015 浏览 2743 个字

css中允许应用纯色作为背景,也允许使用图片作为背景。

background一共有8个对应的属性:

1、background-color:颜色值

用于设定背景的颜色

有3种定义颜色的形式,

1, 颜色关键字表示法,可直接用英文单词来定义,比如red,blue,green等。

2, 16进制表示法,用#000000到#ffffff区间内的16进制数来表示。

3, 三原色表示法,rgb(r,g,b),其中r,g,b分别代表红色,绿色,蓝色,取值范围为0到255.

默认值:transparent

注意:

1.当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。

2.如果设置了 <‘ background-image ‘>,同时也建议设置 <‘ background-color ‘> 用于当背景图像不可见时保持与文本颜色有一定的对比度。

3.对应的脚本特性为backgroundColor

2、background-image:url(“图片路径”);

用于设定对象的背景图片

默认值:none

注意:

如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。

对应的脚本特性为backgroundImage

3、background-repeat:

设置或检索对象的背景图像如何铺排填充。

取值:

repeat-x:背景图像在横向上平铺

repeat-y:背景图像在纵向上平铺

repeat:背景图像在横向和纵向平铺

no-repeat:背景图像不平铺

round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)

space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

但ie览器还不支持以上两个新属性。

默认值:repeat

注意:

允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。

如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值

对应的脚本特性为backgroundRepeat

4、background-position

用于设置或检索对象的背景图像位置。

取值:

<percentage>:用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小

<length>:用长度值指定背景图像填充的位置。可以为负值。

center:背景图像横向和纵向居中。

left:背景图像在横向上填充从左边开始。

right:背景图像在横向上填充从右边开始。

top:背景图像在纵向上填充从顶部开始。

bottom:背景图像在纵向上填充从底部开始

默认值:0% 0%,效果等同于left top

注意:

该属性提供2个参数值(CSS3中已允许提供3,4个值)。

如果提供三或四个,每个<percentage><length>偏移前都必须跟着一个边界关键字(即left | right | top | bottom,不包括center),偏移量相对关键字位置进行偏移。

示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px

缩写方式:

background:url(test1.jpg) no-repeat right 20px bottom 20px;

你也可以设置3个参数值:

拆分方式:

background:url(test1.jpg) no-repeat left bottom 10px;

要注意的是:设置3个或4个值,偏移量前必须有关键字。也就是说,形如:”10px bottom 20px” ,这样的参数设置是错误的,因为10px前面没有关键字。

如果提供两个,第一个用于横坐标,第二个用于纵坐标。

如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)。

对应的脚本特性为backgroundPosition

5、background-attachment:

设置或检索背景图像是随对象内容滚动还是固定的。

取值:

fixed:背景图像相对于窗体固定。

scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)

默认值:scroll

还有三个是css3中新加入的

6、background-size

检索或设置对象的背景图像的尺寸大小。

取值:

<length>:用长度值指定背景图像大小。不允许负值。

<percentage>:用百分比指定背景图像大小。不允许负值。

auto:背景图像的真实大小。

cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

默认值:auto

注意:

  • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
  • 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
  • 对应的脚本特性为backgroundSize
  1. 不支持写入 <‘ background ‘> 缩写方式。
  2. iOS6.1及更早cover值在body上有bug;同时background-size: cover; background-attachment: fixed;配合时也有bug。

7、background-clip:指定对象的背景图像向外裁剪的区域。

取值:

padding-box:从padding区域(不含padding)开始向外裁剪背景。

border-box:从border区域(不含border)开始向外裁剪背景。

content-box:从content区域开始向外裁剪背景。

text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果

默认值:border-box

注意:

  1. text属性值,目前为webkit only

   2.对应的脚本特性为backgroundClip

 8、background-origin

取值:

padding-box:从padding区域(含padding)开始显示背景图像。

border-box:从border区域(含border)开始显示背景图像。

content-box:从content区域开始显示背景图像。

默认值:padding-box

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,956
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,480
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,327
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,110
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,741
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,776