css3 颜色记_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:12
Original
1315 Leute haben es durchsucht

css3 颜色

opacity

  使元素呈现出半透明效果。

opacity:alphavalue || inherit
Nach dem Login kopieren

  alphavalue:默认值为1,可以取0~1任意浮点数。取值为1时,元素完全不透明;取值为0时,元素完全透明。不能为负值。
  inherit:表示继承父元素的opacity设置的值。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    div{       width:100px;       height:100px;       background:#ff0000;       border:1px solid;       opacity:0.3;    }</style></head><body>	<div>胸无大志者,必受制于人</div></body></html>
Nach dem Login kopieren

  opacity使整个元素,包括背景色与前景色都透明了。

RGBA

  rgb颜色模式(也称三原色)是工业界的一种颜色标准,通过对红(red),绿(green),蓝(blue)三个颜色通道的变化以及它们相互之间的叠加得到各种颜色。在css3中,rgba在rgb基础上增加了控制alpha透明度的参数。

rgba(r,g,b,a)
Nach dem Login kopieren

  r:红色值,其取值可以是正整数或者百分值。
  g:绿色值,其取值可以是正整数或者百分值。
  b:蓝色值,其取值可以是正整数或者百分值。
  a:alpha透明值,其取值在0~1之间。
  以上r,g,b三个参数,正整数值的取值范围在0~255;百分数值的取值范围在0%~100%。超出范围的数值将截至其最近的取值极限。a参数的取值范围在0~1。四个参数值都不能为负值。

div{   width:100px;   height:100px;   background:rgba(255,0,0,0.3);   border:1px solid;}
Nach dem Login kopieren

  与opacity类似,都使元素透明,唯一不同的是rgba只透明了元素的背景色,前景色仍然保持原样。

HSL

  hsl和rgb一样,同属于工业界的一种颜色标准,通过对色调(hue),饱和度(saturation),亮度(lightness)三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。

hsl(h,s,l)
Nach dem Login kopieren

  h:色调。取整数值,可以为任意整数,其中0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红。当它们的值大于360时,实际的值等于该值除360之后的余数。
  s:饱和度。颜色的深浅度和鲜艳程度,取百分数,可以取值为0%~100%之间的任意值,其中0%表示灰度,100%表示饱和度最高。
  l:亮度。取值和饱和度一样,0%最暗,100%最亮。

div{   width:100px;   height:100px;   background:hsl(360,80%,80%);   border:1px solid;}
Nach dem Login kopieren

HSLA

  hsla是hsl的扩展模式,在hsl的基础上增加了一个透明通道alpha来设置不透明参数。

hsla:(<length>,<percentage>,<percentage>,<opacity>)
Nach dem Login kopieren

 

div{   width:100px;   height:100px;   background:hsla(360,50%,30%,0.5);   order:1px solid;}
Nach dem Login kopieren

  css3颜色完。学习之路,不完

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage