Css3背景<background>

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

属性

描述

Css

Background-image

规定背景的背景图

2

Background-position

规定背景的定位

2

Background-repeat

规定背景的重复方式

2

Background-color

规定背景的颜色

2

Background-clip

规定背景的绘制区域

3

Background-origin

规定背景图片的定位区域

3

Background-size

规定背景图片的尺寸

3

Background-size

描述

Length

设置背景图像的高度和宽度。第一个是宽度,第二是高度,不设置默认值为auto;

Percentage

以父元素的百分百来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果值设置一个值,则第二个会被默认为auto

Cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

Contain

把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

Background-origin

描述

Padding-box

背景图片相对于内边距来定位

Border-box

背景图片相对于边框盒来定位

Content-box

背景图像相对于内容框来定位

css3 背景background的更多相关文章

  1. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  2. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  3. CSS背景background详解,background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  4. CSS3背景温故

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

  5. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  6. css3 背景记

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

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

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

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

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

  9. CSS 背景background实例

    css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...

随机推荐

  1. 关于VM虚拟机在使用网络时与锐捷网络冲突的解决问题

    在使用NAT网络模式的时候,锐捷会因为冲突强制关闭NAT服务,导致虚拟机无法上网,解决的办法是让NAT服务一直保持启动,写一个bat脚本来一直检测服务是否在运行,并且进行启动操作. 当不需要用虚拟机的 ...

  2. NetCore下获取项目文件路径

    我要获取的是doc/FPFile.xml 百度了一大堆就是找不到解决问题. 把属性更改为始终赋值, XmlDocument xdi = new XmlDocument(); xdi.Load((&qu ...

  3. AO如何获取SDE数据库中的数据

    /// <summary> /// 获取Table类型表的记录 /// </summary> /// <param name="relationCheckCla ...

  4. 【Oracle】Rman备份策略

    1. 查看可设置参数 RMAN> show all; RMAN configuration parameters for database with db_unique_name DRZ are ...

  5. Mybatis与Hibernate的对比

    Mybatis与Hibernate的对比 工作中,用了一段Hibernate与Mybatis,也在此简单的聊上几句,希望对大家有帮助. Mybatis与Hibernate不同,它不完全是一个ORM框架 ...

  6. Deutsch lernen (02)

    1. fließend a. 流利的 Meine französische Freundin spricht fließend Deutsch.     流动的 Der Verkehr wickelt ...

  7. 创建dml触发器

    -实现删除学生信息时把该学生的成绩记录全部清空 --判断触发器是否存在 if exists(select * from sysobjects where name = 'delete_student' ...

  8. 用Python+selenium打开IE浏览器和Chrome浏览器的问题

    这几天在学Python+selenium自动化,对三大浏览器Firefox,Chrome和IE都做了尝试,也都分别下载了对应的webdriver,如:geckodriver.chromedriver. ...

  9. 三维重建:SLAM算法的考题总结

    参考英文维基:https://en.wikipedia.org/wiki/Slam 参考文档:视觉slam研究分析的一点认识 1. 请简单描述您对机器人的SLAM的概念理解? 答: 机器人需要在自身位 ...

  10. (转)基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

    http://www.cnblogs.com/wuhuacong/p/3872890.html 我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起 ...