范仁义css3课程---14、颜色
一、总结
一句话总结：
颜色有比较多的表现方式，比如颜色单词、十六进制、rgb等等，不需要特别去记，会用最常用的几种就好，其它的用的时候多去百度一下就好
1、如何设置颜色的全透明？
设置color的值为transparent即可，例如color: transparent
2、如何设置元素的透明度？
用opacity属性，属性值在0.0到1.0范围内，0表示透明，1表示不透明，比如 opacity: 0.5;
二、颜色
博客对应课程的视频位置：14、颜色
https://www.fanrenyi.com/video/10/45
颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：
p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}
color
- 颜色单词：比如 red green blue white black orange 等等
- HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
- RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
- RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
- HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
- HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）
transparent
- 全透明，使用方式：color: transparent
opacity
- 元素的透明度，语法：opacity: 0.5;
- 属性值在0.0到1.0范围内，0表示透明，1表示不透明。
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>颜色</title> 6 <style> 7 .box1{ 8 color: purple ; 9 /*color: #C1FFC1;*/ 10 /*color: rgb(234,255,123);*/ 11 /*color: rgba(255,34,23,0.2);*/ 12 /*color: hsl(128,90%,79%);*/ 13 /*color: hsla(128,90%,79%,0);*/ 14 /*color: transparent;*/ 15 opacity: 0.5; 16 margin-top: -50px; 17 } 18 .img_box{ 19 width: 100px; 20 height: 100px; 21 } 22 .img_box img{ 23 width: 100%; 24 height: 100%; 25 opacity: 0.3; 26 } 27 </style> 28 </head> 29 <body> 30 31 <div class="img_box"> 32 <img src="../imgs/photo4.jpg" alt=""> 33 </div> 34 <div class="box1"> 35 谁见幽人独往来，缥缈孤鸿影 36 </div> 37 </body> 38 </html>