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. JAX-WS使用Handler Chain加工消息

    承前 本文的示例,是基于前一篇文章中的实例而改进的,如果想要运行本文的代码例子,需要先实现前一篇的代码. 前一篇文章JAX-WS开发WebService初级 Handler概念 在WebService ...

  2. 各种文件的mime类型

    扩展名:abs MIME类型:audio/x-mpeg 扩展名:ai MIME类型:application/postscript 扩展名:aif MIME类型:audio/x-aiff 扩展名:aif ...

  3. led灯的翻转函数

    定义: uint8_t led1_val; void LED1(uint8_t* val){ *val =!(*val); if( *val == 0x00 ) HAL_GPIO_WritePin ( ...

  4. TestNG中的数据源DataProvider概述

    http://blog.csdn.net/taiyangdao/article/details/52141711 在上一篇文章中,我们知道带参数的测试方法,可以在testng.xml配置文件中为其参数 ...

  5. C# 编程实现非自相交多边形质心

    计算公式公式: http://en.wikipedia.org/wiki/Centroid#Centroid_of_polygon 多边形的质心: 一个非自相交的n个顶点的多边形(x0,y0), (x ...

  6. apache与nginx的虚拟域名配置

    由于开发需求,项目有时候需要设置虚拟域名进行测试.下面是分别是apache和nginx的配置 一.apache 环境:wampserver2.5 1.修改host文件 C:\Windows\Syste ...

  7. Java内存模型

    1. 概述 多任务和高并发是衡量一台计算机处理器的能力重要指标之一.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这个指标比较能说明问题 ...

  8. java中使用sql的like关键字

    String sql = "select * from userinfo where nickname like ?"; PreparedStatement ps = conn.p ...

  9. systemctl命令用法详解

    systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...

  10. mysql分组合并GROUP_CONCAT

    SELECT  pid,  GROUP_CONCAT(field ORDER BY  coder desc)  'msg'from   product_field    GROUP BY  pid 分 ...