css3 颜色记_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:41:12
원래의
1315명이 탐색했습니다.

css3 颜色

opacity

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

opacity:alphavalue || inherit
로그인 후 복사

  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>
로그인 후 복사

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

RGBA

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

rgba(r,g,b,a)
로그인 후 복사

  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;}
로그인 후 복사

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

HSL

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

hsl(h,s,l)
로그인 후 복사

  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;}
로그인 후 복사

HSLA

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

hsla:(<length>,<percentage>,<percentage>,<opacity>)
로그인 후 복사

 

div{   width:100px;   height:100px;   background:hsla(360,50%,30%,0.5);   order:1px solid;}
로그인 후 복사

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿