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. IE7中绝对定位元素之间的遮盖问题

    由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...

  2. rgba()兼容IE8

    CSS: //一般的高级浏览器都支持 background: rgba(255,255,255,0.1); //IE8下 filter:progid:DXImageTransform.Microsof ...

  3. sublime text2 换主题

    网上看到一款喜欢的主题,换掉初始的主题,感觉颜色浅一点会比较好看,看中了下面这款. 后来看到有在 github 上的人做的 ,这是地址 ,上面也有详细的如何更改的步骤,下面是我自己这里做个备份. 1. ...

  4. 简述Session 、Cookie、cache 区别

    区别: 1.session是把数据保存在服务器上,每一个用户都有自己的session. 2.cookie是保存在客户端(也就是本机电脑). 3.cache是保存在服务器上,每个用户都可以访问的对象. ...

  5. js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

  6. mysql存储过程语法及实例

    存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. --------------------基本语法-------------------- 一.创建存储过程cr ...

  7. /proc 【虚拟文件系统】

    在安装新硬件到 Linux 系统之前,你会想要知道当前系统的资源配置状况. Linux 将这类信息全集中在 /proc 文件系统下./proc 目录下的文件都是 Linux 内核虚拟出来的,当你读取它 ...

  8. zabbix3.0.4 部署之七 (zabbix3.0.4 邮件报警) & 微信报警

    1 [root@sv-zabbix ~]# cat /usr/local/zabbix/share/zabbix/alertscripts/sendEmail.sh #!/bin/bash#SMTP_ ...

  9. [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續)

    [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續) a10036it 发表于 2015-7-27 21:11:19 https://www.itsk.com/t ...

  10. IP首部校验和的计算

    ip抓包结果:0000: 00 e0 0f 7d 1e ba 00 13 8f 54 3b 70 08 00 45 00 0010: 00 2e be 55 00 00 7a 11 51 ac de ...