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;
- Thinking in React Implemented by Reagent
- ssm整合Redis
- 前端魔法堂——调用栈,异常实例中的宝藏
- 开启MySQL的binlog日志
- C#解析JSON
- 动手写个数字输入框1:input[type=number]的遗憾
- 小猪农场获百万天使轮,六声域名源自运营主体
- Intellij idea 的maven项目自动下载jar包
- python3和python2共存
- 揭密微信跳一跳小游戏那些外挂
- 特斯拉出现人才流失潮,竟因为一些工程师认为Autopilot自动驾驶技术并不安全
- 微信又更新了,这次放出年度大招!新变化让不少人拍手叫好!
- “JINAN”:未来电动汽车边跑边充电
- Bagging算法
- 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 实例