颜色背景

CSS中背景颜色由background-color决定，这里的背景颜色会渲染padding和content，不会渲染border和margin部分。

在css3中可以通过background-clip来定义颜色的渲染区域：取值为content-box(仅渲染content部分),padding-box(渲染content和padding部分)和border-box(渲染content、padding)；

测试过程发现padding-box和border-box渲染效果一样，不知为何有这两个值？望回帖告知，如何测试这两个值区别。

图片背景

css中通过指定background-image:url(image)来使用图片作为背景。

css3中可以使用backgound-size指定背景图片的大小，例如:background-size: 200px 300px，

　　还可以通过background-clip来指定背景图片区域，取值为content-box(仅渲染content部分),padding-box(渲染content和padding部分)和border-box(渲染content、padding)；

　　还可以使用background-origin来指定背景图片的定位区域，取值为content-box(根据content定位),padding-box(根据padding定位)和border-box(根据border定位）

CSS 背景颜色的更多相关文章

  1. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  2. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  3. css背景颜色、背景图片，以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• ba ...

  4. 一个CSS背景颜色问题

    div{ background: rgba(0,0,0,.1);     background-color: #19FFFFFF; } 安卓下会显示上面的透明颜色,而在iOS上则显示下面的颜色,并且其 ...

  5. css背景颜色渐变

    1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background ...

  6. CSS背景颜色透明

    { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 兼容大部分主流浏览器 filter ...

  7. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  8. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  9. CSS 背景background实例

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

随机推荐

  1. opencv中stitching_detail的运行

    这个拼图并非自带的直接使用sources中的代码.而是把必要的内容放到工程中,改造成自己的图像拼接.参考博文:http://www.tuicool.com/articles/fMbUfaF 该篇博文总 ...

  2. linux__升级java版本

    java下载地址:http://www.oracle.com/index.html 使用which java查看到,Java的环境变量指向的还是/usr/bin/java,问题找到了.于是就进行了下面 ...

  3. 微信、微博、qq图标服务实现

    实现原理:变化前的图标和变化后的图标在一张图片上,用这张图片作为背景,通过定义背景的位置来实现显示哪个图标,其中还带着滑动的动画效果. <!DOCTYPE html> <html l ...

  4. nodejs使用express4框架默认app.js配置说明

    var express = require('express'); //引入express模块 var path = require('path'); //引入path模块,该模块包括了一些处理文件路 ...

  5. React组件生命周期过程说明【转】

    实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...

  6. 用ASP生成RSS

    <% Response.Clear Response.CharSet="gb2312" '数据集 Response.ContentType="text/xml&qu ...

  7. ACM——数的计算

    数的计算——(递归(超时)和非递归) 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:1050            测试通过:31 ...

  8. Sql Server通过BCP数据导出Excel

    1.1. bcp的主要参数介绍 bcp共有四个动作可以选择. (1) 导入. 这个动作使用in命令完成,后面跟需要导入的文件名. (2) 导出. 这个动作使用out命令完成,后面跟需要导出的文件名. ...

  9. C#中的集合

    [集合不同于数组,是一组可变类型的.可变数量的元素的组合,这些元素可能共享某些特征,需要以某种操作方式一起进行操作.一般来讲,为了便于操作这些元素的类型是相同的] [集合与数组的区别:数组是连续的.同 ...

  10. oracle随笔（转）

    ---------数学函数 1.绝对值S:select abs(-1) valueO:select abs(-1) value from dual 2.取整(大)S:select ceiling(-1 ...