大家好久不见!我回来更新了!谢谢大家还关注着我的公众号!比心
想试一下新打开的插广告功能,开的智能插入大家不要被广告迷惑不知道真正的图片在哪里
大家对颜色设置应该是不陌生的,设置背景颜色或者是文字颜色都会接触到。
我刚刚接触颜色设置的时候经常因为自己有关色彩的英文知道的不够多而忧郁,设置的时候都是red,green,blue之类的颜色,想做个漂亮的背景或文字的颜色这种肤浅的词汇必然是不够!不够!不够!
通过颜色名称设置颜色
哈哈哈虽然我上面说了通过颜色名称设置很肤浅,但它也在今天的教程里拥有姓名!
这个方式虽然不容易(基本不可能)得到自己想要的界面效果但是它拿来测试随手一用贼方便!而且色彩很醒目!所以还是需要知道!
我个人认为没必要和英文色彩名死磕,知道几个基本的词汇方便使用就好了
<p >red'>通过颜色名称设置颜色</p>
解释:p标签的样式为:背景色设置为红色
效果如下图
通过16进制设置颜色
大家可能也见过这种颜色设置方式 #FFA900 、#F00。
看上去似乎是可以通过键盘瞎打获得惊喜or惊吓的颜色设置方式。至于为什么有的是#后面6个字符,有的是#后面3个字符也不了解,能用什么字符来表示颜色也不了解。
这里我们要知道红绿蓝这三基色,具体的概念大家可以搜索一下。我们后面提到的RGB也是红RED绿GREEN蓝BLUE三基色的英文首字母组成的。
然后我们要说一下16进制,我们上数学课用的是10进制,满十进一位,16进制顾名思义就是满16进一位。【0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F】这就是16进制的0-15。
颜色由一个十六进制符号(形如#FFA900)来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0由十六进制的#00表示,最大值是255由十六进制的#FF表示。
所以不是随便在键盘上打6个字母就可以获得颜色,字母是16进制中对10进制中10~15的表示方式。
<p >#FF0000</p>
<p >#F00</p>
解释:p标签的样式为:背景色设置为 #FFFF00
p标签的样式为:背景色设置为 #FF0
效果如下图
可以看到他们颜色一样,十六进制表示颜色每两位相同可以省略,所以会出现3个字符表示的颜色。
通过RGB设置颜色
我们在上边提到了一下子三基色和16进制,每种颜色的最小值是0由十六进制的#00表示,最大值是255由十六进制的#FF表示。RGB的方式就是换了一个形式而已。
我自己写小网页的时候很喜欢用RGB设置颜色,因为大部分截图工具都提供色彩的RGB码,配色好参考。
<p >
RGB设置的颜色
</p>
解释:p标签的样式为:背景色设置为 rgb(111,111,011)
效果如下图
通过RGBA设置颜色
RGBA比RGB多了一个A,这个A是给色彩加一个透明度的意思
RGBA(红,绿,蓝,alpha) Alpha参数介于0~1之间。
0是完全透明,1是完全不透明。
<p >
RGB设置的颜色
</p>
<p >
RGBA设置的颜色
</p>
解释:p标签的样式为:背景色设置为 rgb(111,111,011)
p标签的样式为:背景色设置为 rgba(111,111,011,0.5)
效果如下图
上图对比可以看出来透明度设置为0.5的效果。
谢谢大家看这次更新!(✪ω✪)
我会尽量多更的,希望能找时间更个大的,总写导航条怎么写,想克服拖延症写个中间的块块。
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/CSScolor%20settings.html
评论列表(196条)
测试