前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

[网站开发入门指南50] 色值设置小工具与透明度问题 #javascript

色值工具与不透明度。

可以来看一下,比如在这里取了一个颜色,取了这样的紫色,可以在这里去设计软件里面把这个值复制过来,复制了之后在这里去写一下,记得要加一个井号,16进制,这个颜色就会在这里展示出来了。

这个颜色其实可以用vscode自带的调色板工具去切换颜色色值的模式,当点击这里的时候能切换好几种。当去调整透明度的时候会发现后面16进制的多了两位,包括其他的颜色模式也会把它变成a的,加了透明度a字母的模式,RGBA。

这里可以看到这里还有个HWB,这个也是从来没有用过,有兴趣可以自己去研究一下。所以可以点击这里去切换不同的颜色模式,下面的代码的设定也会随之的更改。

当去调整颜色的时候会发现调节的面板颜色就断成了两边,左边这里就是当前调整变成的颜色,右边这里就是调整之前的颜色。如果调完半天之后发现效果不满意,想回到原来那个,可以点击一下就回去了。

有时候如果想用16进制的颜色的写法,但是透明度又感觉不太好设置,其实可以先把它切换为RGBA模式。比如现在一开始这里是16进制的写法,想让它变成20%(不透明度)的颜色,先把鼠标放这里,让颜色色板出现之后先把它转成RGBA的模式,调透明度,调到比如20%的透明度,0.2,再切回去,再切回到这个模式。这个就不就是16进制的带不透明度设置的写法,一个颜色值了。

所以这些小技巧大家都可以去用一下。当然很多时候去给某个颜色设置不透明度相对来说会比较少用,比较常用的去设置不透明度其实很多时候是之前给大家介绍过的,给整个元素用opacity去设置一个不透明度。

比如把它设置到父元素上,不透明度跟颜色的不透明度是有非常大的区别的。不透明度(opacity)是整个元素的整体,包括它的子元素也会受影响的,会看到它整体,包括内部的子元素也好,它的整体变成了很不明显的效果了。

但是颜色的设置只会影响到设置颜色的部分(或者方面),比如设置不透明度,它只影响到了子元素的背景颜色的不透明度。比如字体,color是给文字设置颜色的,不透明度其实也可以设置,比如把字体的不透明度降到这么低,就会发现字体自己的颜色就会变得不透明度的状态。

比如这里来个red,就明显能感觉到它这些都是对应各自影响的部分去产生作用的。所以有时候如果希望背景颜色有一个不透明度,但是整体的元素不想让它有任何的半透明的效果,就可以通过特定的背景颜色的颜色色值的不透明度的设置达到想要的效果,而不影响到整体的元素。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言