background用来定义html元素的背景效果

background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法

1.十六进制方式,如"#ff0000"

2.RGB方式,如"rgb(255,0,0)"

3.颜色名称,如"red"

background-image:定义元素的背景图片,通过background-image:url('path/图片名称')指定

默认情况下,背景图片会在水平和垂直方向上进行平铺重复显示,即默认的background-repeat值为repeat

background-repeat:定义元素的背景图片是否以及如何重复显示

默认值值repeat,no-repeat、repeat-x、repeat-y分别表示不重复、在水平方向、垂直方向重复显示

background-attachment:定义元素的背景图片是否固定或者随着页面的其余部分滚动

默认值为scroll随页面部分滚动,fixed表示固定不滚动,inherit表示从父元素继承

background-position:定义元素的背景图片起始位置,例如定义图片右上角不重复显示

(left center right * top center bottom)九种组合,并且这两个值如果只指定一个那么另外一个默认为center

x% y%:表示水平位置和垂直位置,默认为左上角0% 0%,右下角是100% 100%,

xpos ypos:表示水平位置和垂直位置

inherit表示从父元素继承

背景效果通过上述5个属性来控制,为使用方便可以将这些属性合并在一起,简写为 "background",当时用简写属性时,顺序为color、image、repeat、attachment、position,可根据实际需要选择,无需全部使用,例如

body {background:lightpink url('img_tree.png') no-repeat right top;}

css背景样式background的更多相关文章

  1. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  2. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  3. 0016 CSS 背景:background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

  4. CSS背景样式

    CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...

  5. HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

  7. CSS常用样式--background

    CSS background 属性 参考:W3school- CSS background 所有浏览器都支持 background 属性,其简写形式,在一个声明中设置所有的背景属性,各属性需按顺序,语 ...

  8. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  9. CSS背景属性background

    background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...

随机推荐

  1. statement对象与sql语句(新手)

    本篇介绍读上篇代码中的疑惑点 实现简单网页上对数据内容进行增删改查,需要用到三个部分:jsp网页前端部分+java后台程序+数据库表 一.创建一个Statement (用于在已经建立数据库连接的基础上 ...

  2. 8.C#友元程序集----可访问性相关

    在一个团队或者公司中,一个人开发出来的程序集中的类的可见性有public,private和internal, public:对所有程序集可见,就是说如果拿到程序集.DLL文件,那么类就被公开了. pr ...

  3. Unity中HideInInspector和SerializeField以及Serializable

    首先,Unity会自动为Public变量做序列化,序列化的意思是说再次读取Unity时序列化的变量是有值的,不需要你再次去赋值,因为它已经被保存下来. 然后是,什么样的值会被显示在面板上? 已经被序列 ...

  4. 进入Linux单用户模式

    1.       在启动系统出现如下画面时按Enter键进入系统设置页面: 2.       系统设置页面: 3.       按下e键进入: 4.       选择第二项,按e键进入 5.      ...

  5. c#基础思维导图

  6. Javascript-双色球

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 软工网络15团队作业4——Alpha阶段敏捷冲刺4.0

    软工网络15团队作业4--Alpha阶段敏捷冲刺4.0 1.每天举行站立式会议,提供当天站立式会议照片一张. 2.项目每个成员的昨天进展.存在问题.今天安排. 成员 昨天已完成 今天计划完成 郭炜埕 ...

  8. wordpress学习(四)---url伪静态简单了解

    在page-url.php页面做测试 <h2>url伪静态</h2> 接收到的pagename参数是:<? echo $wp_query->query_vars[' ...

  9. 2.sklearn库中的标准数据集与基本功能

    sklearn库中的标准数据集与基本功能 下面我们详细介绍几个有代表性的数据集: 当然同学们也可以用sklearn机器学习函数来挖掘这些数据,看看可不可以捕捉到一些有趣的想象或者是发现: 波士顿房价数 ...

  10. CSS选择符-----伪类选择符

    Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...