css渲染(三)颜色与背景
颜色的应用主要分为前景色、背景色和透明三个部分。
一、前景色
color
color前景色
值: <color> | inherit
初始值: 用户代理特定的值
应用于: 所有元素
继承性: 有
一般来说,前景是元素的文本,不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色,可以使用color属性,也可以使用属性border-color设置边框颜色。
二、透明度
opacity
opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个透明度,并且其透明度直接会继承给其后代元素
值: value | inherit
value:默认值是1,可以取0-1的任意浮点数。其中,1表示完全不透明,0表示完全透明
初始值: 1
应用于: 所有元素
继承性: 无
opacity: 0.8;
三、背景色
[注意]所有背景属性都不能继承
背景颜色
背景色background接受所有合法的颜色,背景颜色不能继承,其默认值是transparent。
background-color: red;
背景图像
背景图像background-image会放在所指定的背景颜色之上,初始值: none
background-image: url("image/1.jpg");
背景平铺
背景平铺的属性值中space和round是CSS3新增的值。space表示背景图像的两端对齐平铺,多出来的空间用空白代替;round也表示背景图像的两端对齐平铺,但多出来的空间通过自身拉伸来填充。
值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit
background-repeat: repeat;
背景定位
背景定位background-position,初始值: 0% 0%
值: <length> | left | center | right | top | center | bottom
background-position:center ; //图的中间和元素中间对齐
background-position: 10px 20px; //水平方向10px,垂直方向20px
背景裁切
背景裁切(background-clip)属性用来定义背景图像的裁剪区域。
值:background-clip: padding-box || border-box || content-box
在webkit内核下支持text属性
-webkit-background-clip: text;
background-clip: content-box;
背景尺寸
使用背景尺寸(background-size)属性可以指定背景图片的尺寸,可以控制背景图片在水平和垂直两个方向的缩放,也可以控制图片拉伸覆盖背景区域的方式,甚至还可以截取背景图片。
background-size: 20px 30px;
- 快速搭建Storm集群环境
- OpenCV中BLOB特征提取与几何形状分类
- OpenCV实现照片自动红眼去除
- OpenCV3.1.0级联分类器训练与使用
- 图像处理之理解Homography matrix(单应性矩阵)
- OpenCV中图像直方图与应用
- OpenCV中图像修复技术介绍与演示
- 44个Java代码性能优化总结
- LDA(Linear Discriminant Analysis)算法介绍
- Express.js 4,Node.js,MongoDB REST API 简易教程
- 基于梯度下降算法求解线性回归
- 彩色图像高斯反向投影
- OpenCV中直方图反向投影算法详解与实现
- 基于一维级联快速膨胀与腐蚀算法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Laravel框架实现的上传图片到七牛功能详解
- Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果
- Android集成zxing扫码框架功能
- Android 实现抖音小游戏潜艇大挑战的思路详解
- 修改Android Studio 的 Logcat 缓冲区大小操作
- Android自定义View验证码输入框
- PHP生成随机字符串实例代码(字母+数字)
- Laravel框架中缓存的使用方法分析
- android实现搜索功能并将搜索结果保存到SQLite中(实例代码)
- Android实现全局右滑返回
- Android实现打地鼠小游戏
- android实现手机传感器调用
- Android实现接近传感器
- PHP 模拟登陆功能实例详解
- PHP判断一个变量是否为整数、正整数的方法示例