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. 尝试用md编辑器写博客, 内容为 jupyter笔记

    Matplotlib tutorial http://www.labri.fr/perso/nrougier/teaching/matplotlib/#introduction %matplotlib ...

  2. AC自动机小结

    专题链接 第一题--hdu2222 Keywords Search ac自动机的模板题,入门题.  题解 第二题--hdu2896 病毒侵袭   一类病毒的入门题,类似模板  题解 第三题--hdu3 ...

  3. Ioc

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

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

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

  5. 有关宏定义的bug

    #define max(a,b) a>b?a:b 这个宏有诸多缺点:当调用比如max(3,2)*2时会出现不想要的结果.按理来说,我们想要得到的结果是:3*2=6,但是由于优先级的问题,得到的结 ...

  6. viewPager + fragment

    有两种实现方式,一种是 fragmentActivity + FragmentPagerAdapter (Fragment,FragmentManager需要导包:android.support.v4 ...

  7. java中的数据结构(集合|容器)

    对java中的数据结构做一个小小的个人总结,虽然还没有到研究透彻jdk源码的地步.首先.java中为何需要集合的出现?什么需求导致.我想对于面向对象来说,对象适用于描述任何事物,所以为了方便对于对象的 ...

  8. 【crawler】log4j:WARN No appenders could be found for logger (dao.hsqlmanager).

    This Short introduction to log4j guide is a little bit old but still valid. That guide will give you ...

  9. pm2.5检测统计

    SELECT AVG(pm25_h),AVG(pm10_h),AVG(temp_h),AVG(humi_h),AVG(co2_h),AVG(tvoc_h),perf_time FROM( SELECT ...

  10. JAVA字符串05之课程问题解决

    (一)古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 1.设计思想:首先选择是加密字符串还是解密字符串,两种算法相似.如果要加密字符串 ...