微信扫一扫打赏支持

范仁义css3课程---14、颜色

范仁义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>

 

 

 

 

 
 
 
posted @ 2020-01-08 12:24  范仁义  阅读(202)  评论(0)  编辑  收藏  举报