css2和CSS3的background属性简写

1、css2:background:background-color || url("") || no-repeat || scroll || 0 0;

   css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black;

CSS2中的Background属性:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   也可以分解写成:
   background-color: color值 || RGBA值;
   background-image: url();
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-position: <length> || <per>

CSS3中的Background属性

   background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
   也可以分解写成:
   background-image: url();
   background-position: <length> || <per>
   background-size: <length> || <per>
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;
   background-color: color值 || RGBA值;

这里有点特别需要注意,如果使用联写方式时,background-size需跟在background-position的后面,并用“/”隔着,即"background-position/background-size"。另外本人强烈建议CSS3中的Background属性不要全部联写,最好把CSS3中的属性拆分出来单独书写,因为他们在不同浏览器下需要加上自己的前缀,如:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   background-size: <length> || <per>
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的,把各自的私有前缀加上。重温了一次两种标准下的Backgroud后,就正式进入今天的主题CSS3的多背景。

CSS3 Multiple backgrounds从字面而知,CSS3的多背景,其主要作用就是给同一个元素设置多个背景图像,换句话说,就是在同一元素上可以设置除background-color外多个background的其它属性,因为一个元素只具备一个背景色,但自从有了CSS3后,可以让同一个元素同时具有多个背景图像,并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。前面几句可能归纳的有点拗口,不太好理解,后面大家可以通过具体的实例来增加对他的理解。此时或许有朋友会问,那这个多背景我们在样式中要写backgrouds还是一样的background呢?这个问题问得很好,在以前读书学英语时,复数往往会多一个“s”,那我在这里大声告诉大家,CSS3的多背景我们不使用“backgrounds”而是继续使用"backgroud",况且W3C也没有“backgrouds”,至于具体的语法如下所示:

  background : [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
  也可以分解成:
  background-image: url1,url2,...,urlN;
  background-repeat: repeat1,repeat2,...,repeatN;
  background-position: position1,position2,...,positionN;
  background-size: size1,size2,...,sizeN;
  backrgound-attachment: attachment1,attachment2,...,attachmentN;
  background-clip: clip1,clip2,...,clipN;
  background-origin: origin1,origin2,...,originN;
  background-color: color;

取值说明:

1、background-image:此值用来设置元素的背景图片,可以使用相对地址或绝对地址索引背景图片,详细参考w3c的Background-image

2、background-repeat:此值用来设置元素的背景图片的平铺方式,其默认值为repeat,详细参考w3c的background-repeat

3、background-position:此值用来设置元素的背景图片的定位起点,其默认值为left top,详细参考w3c的background-position

4、background-size: 此值用来设置元素的背景图片的尺寸大小,其默认值为auto,详细参考《CSS3 Background-size》;

5、background-attachment:此值用来设置元素的背景图片是否为固定显示,其默认值为scroll,详细参考background-attachment

6、background-clip:此值用来控制元素的背景图片显示区域,其默认值为border-box,详细参考《CSS3 Background-clip》;

7、background-origin:此值用来控制元素的背景图片position的默认起始点,其默认值为padding-box,详细参考《CSS3 background-origin》;

8、 background-color: transparent; color: rgb(41, 180, 240); text-decoration: none; background-position: initial initial; background-repeat: initial initial;">background-color。

其中background-image需要多个,但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个,如果有多个背景图片时,其他属性只有一个时,那么表示所有背景图片应用了相同的属性设置,但background-color只能设置一个,如果你设置多少background-color将是一种错误的语法设置。

时间: 2024-08-07 23:24:03

css2和CSS3的background属性简写的相关文章

从零开始学 Web 之 CSS3(三)渐变,background属性

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.渐变 渐变是C

background的简写属性

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 </script> 10 <style type="text/css"> 1

css3 常用的属性

1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样式. E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式. E:hover CSS1/2 设置元素在其鼠标悬停时的样式. E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. E:focus CSS1/2 设置元素在成为输入焦点(该元

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS属性简写汇总

CSS代码编写的过程中,代码数量非常庞大,许多属性会被反复使用,这样来来回回地敲打同样的属性名称会占用不少的时间.作为一名优秀的web前端人员,应当了解记忆各种属性的简写方式,用以提高自身的工作效率,缩减代码数量,增强可读性.作为一名刚接触不久的初学者,在网上搜集资料,整理了常用属性的简写模式,供大家参考. 1.颜色color简写 在颜色值采用16进制,且每两位的值相同,可以简写一半. 1 color : #113366 ; 简写为 1 color : #136 ; 2.边距margin和pad

CSS学习笔记-background属性

平常总是使用background的缩写形式,忽视了各属性的细节在此进行总结. background-attachment W3C:属性设置背景图像是否固定或者随着页面的其余部分滚动. 属性值: scroll   默认值.背景图像会随着页面其余部分的滚动而移动. fixed    当页面的其余部分滚动时,背景图像不会移动. inherit  规定应该从父元素继承 background-attachment 属性的设置. background-position W3C:属性设置背景图像的起始位置.其

Css3 新增的属性以及使用

Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些新的语法.CSS3 : border-radius :nth-of-type() background-size** ## 1.transition过渡?.transition-property : 规定设置过渡效果的CSS属性的名称. all ( 默认值 ) , 指定 width , height

background属性总结,background-image路径问题

(1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-position规定背景图像的位置.background-size规定背景图片的尺寸.background-repeat规定如何重复背景图像.background-origin规定背景图片的定位区域. background-origin: padding-box|border-box|content-bo