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;
最新文章
- Spring的前期配置
- AmazeUI 框架知识点-组件
- 【Win10】解决 模拟器调试手机 错误->; 引导阶段... 无法找到指定路径......\2052\msdbgui.dll
- radvd.conf RADVD配置文件内容部分解析
- 在TextView中加入图片
- JUnit介绍
- 开天辟地-用visualstudio2010编写helloworld
- Linux中断管理 (2)软中断和tasklet
- Linux系统命令 3
- TCC细读 - 2 核心实现
- springboot mybatis pagehelper 分页问题
- 两排序数组的中位数 Median of Two Sorted Arrays
- OC中instancetype与id的区别
- mysql 不能插入中文和显示中文
- ios Quartz 各种绘制图形用法
- JavaScript stringObject.replace() 方法
- Android -BLE蓝牙小DEMO
- MoreEffectiveC++Item35(操作符)(条款5-8)
- 跟我一起读postgresql源码(二)——Parser(查询分析模块)
- Linux--LAMP平台搭建
热门文章
- 实现Java程序跨平台运行十二个注意事项
- html5使用local storage存储的数据在本地是以何种形式保存的
- 一步步带你做vue后台管理框架
- python 爬虫系列09-selenium+拉钩
- TabLayout实现底部导航栏(2)
- laravel框架的rabbitmq使用示例[多队列封装]
- POJ 3468——A Simple Problem with Integers——————【线段树区间更新, 区间查询】
- SpringBoot | 第三十一章:MongoDB的集成和使用
- sqlServer游标的使用
- 微软的深度学习框架cntk ,我目前见过 安装方式最简单的一个框架,2.0之后开始支持C# 咯