1.背景的五种基本属性 background-color(背景颜色) background-image(背景图片) background-repeat(背景图片展示方式) background-attachment(背景图片是固定还是滚动) background-position(背景图片位置) 综合使用:background:[<background-color>][<background-image>][<background-repeat>][<background-attachment>][<background-position>]

2.background-color属性 语法:background-color:transparent || <color> transparent:透明色 color:颜色名、rgb色、hls值、十六进制值、rgba色、hsla值

3.background-image属性 语法:background-image:none || <url> none为默认值,没有的意思 url:图片地址,可以是相对地址,也可以是绝对地址

4.background-repeat属性 语法:background-repeat:repeat || repeat-x || repeat-y || no-repeat repeat:背景图片沿X轴和Y轴方向平铺 repeat-x:背景图片沿X轴方向平铺 repeat-y:背景图片沿Y轴方向平铺 no-repeat:背景图片不做任何平铺

5.background-attachment属性 语法:background-attachment:scroll || fixed scroll:背景图片随着页面的其余部分滚动 fixed:背景图片固定不动 注:取值fixed时,运用在html或body标签上,使用在其他标签不能达到固定效果

6.background-position属性 语法:background-position:[percentage] || [length] || [left | center | right] || [top | center | bottom] 作用:用来设置背景图片的位置 默认值:(0,0) || (0%, 0%) || (left top),其值可以是具体的百分数或数值设置(可以是负值),也可以使用关键字left、center、top、right、top、bottom配合设置,个属性定位方式:

CSS3背景的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  5. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  8. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  10. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. .Net架构必备工具列表

    ★微软MSDN:每个开发人员现在应该下载的十种必备工具 点此进入 ★网友总结.Net架构必备工具列表 Visual Studio 这个似乎是不言而喻的,只是从严谨的角度,也列在这.实际上,现在也有一个 ...

  2. Scrum Meeting 14-20151227

    说明 这几天我们代码人员一直在做数据库,没有来得及更新博客,从明天开始将会正常做scrum meeting,也将加快开发 工作,预计beta版本将会在12.30之前发布. 摘要 目前基本开发都已经做的 ...

  3. C语言习题(结构)

    实际应用中经常会用到二维平面上的点,点的操作包括设置点的位置( pointT setPoint(double x , double y ) ),显示第n个点的位置( void showPoint(po ...

  4. OpenCV学习笔记(一)——OpenCV安装

    1.无脑安装以下安装文件 cn_visual_studio_2010_ultimate_x86_dvd_532347.iso 2.测试Hello OpenCV 文件→新建→项目 win32应用程序→下 ...

  5. 在网站制作中随时可用的10个 HTML5 代码片段

    HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮 ...

  6. Eclipse通过jdbc连接oracle数据库

    首先要有包 然后,在项目中加载进去- 最后就是代码了 import java.sql.*;public class GetConn {public Connection getConnection() ...

  7. thinkPHP的用法之M

    M方法 //添加 $res = M('comment')->add($data); //成功返回新增ID,失败返回false //删除 M('myop_myinvite')->where( ...

  8. SoapUI新版本“Ready!API 1.80”体验

    做过接口测试的朋友,肯定都知道一个工具--SoapUI,它强大的功能与集成用例的特性,让不管是开发还是测试,都喜欢用它.在经历了众多版本后,SmartBear公司将SoapUI 从进行了大改版,这也是 ...

  9. Android之ViewPager组件实现左右滑动View

    什么是ViewPager VIewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用来实现左右滑动切换View的效果.如果想向下兼容需要 android-support-v4.j ...

  10. ElasticSearch集群配置

    因机器有限,本文只做单机3个节点的集群测试. 1.集群测试信息 elasticsearch版本:elasticsearch-2.4.1 windowns版本:win10 2.解压elasticsear ...