> 웹 프론트엔드 > HTML 튜토리얼 > Sass函数颜色函数Opacity函数_html/css_WEB-ITnose

Sass函数颜色函数Opacity函数_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:32:58
원래의
1282명이 탐색했습니다.

Opacity函数简介

在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而后者是控制整个元素的透明度

在 Sass 中,也提供了系列透明函数,只不过这系列的透明函数主要用来处理颜色透明度:

  •       alpha($color) /opacity($color):获取颜色透明度值;
  •       rgba($color, $alpha):改变颜色的透明度值;
  •       opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;
  •       transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明。
  •  

     

     

    Opacity函数-alpha()、opacity()函数
    alphpa()opacity() 函数很简单,与前面介绍的 red(),green() 等函数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度,那么这两个函数得到的值都会是 1:

    1 >> alpha(red)2 13 >> alpha(rgba(red,.8))4 0.85 >> opacity(red)6 17 >> opacity(rgba(red,.8))8 0.8
    로그인 후 복사

    Opacity函数-rgba()函数
    有一个 rgba() 函数可以创建一个颜色,同时还可以对颜色修改其透明度。其可以接受两个参数,第一个参数为颜色,第二个参数是你需要设置的颜色透明值。

     1 >> rgba(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> rgba(#dedede,.5) 4 rgba(222, 222, 222, 0.5) 5 >> rgba(rgb(34,45,44),.5) 6 rgba(34, 45, 44, 0.5) 7 >> rgba(rgba(33,45,123,.2),.5) 8 rgba(33, 45, 123, 0.5) 9 >> rgba(hsl(33,7%,21%),.5)10 rgba(57, 54, 50, 0.5)11 >> rgba(hsla(33,7%,21%,.9),.5)12 rgba(57, 54, 50, 0.5)
    로그인 후 복사

    Opacity函数-opacify()、fade-in()函数

    这两个函数是用来对已有颜色的透明度做一个加法运算,会让颜色更加不透明。其接受两个参数,第一个参数是原始颜色,第二个参数是你需要增加的透明度值,其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时,会以 1 计算,表示颜色不具有任何透明度。

     1 >> opacify(rgba(22,34,235,.6),.2) 2 rgba(22, 34, 235, 0.8) 3 >> opacify(rgba(22,34,235,.6),.5) 4 #1622eb 5 >> opacify(hsla(22,34%,23%,.6),.15) 6 rgba(79, 53, 39, 0.75) 7 >> opacify(hsla(22,34%,23%,.6),.415) 8 #4f3527 9 >> opacify(red,.15)10 #ff000011 >> opacify(#89adde,.15)12 #89adde13 >> fade-in(rgba(23,34,34,.5),.15)14 rgba(23, 34, 34, 0.65)15 >> fade-in(rgba(23,34,34,.5),.615)16 #172222
    로그인 후 복사

    其中 fade-in( ) 函数又名 fade_in() 函数。其所起作用等效。

    Opacity函数-transparentize()、 fade-out()函数
    transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反,让颜色更加的透明。这两个函数会让透明值做减法运算,当计算出来的结果小于 0 时会以 0 计算,表示全透明

     1 >> transparentize(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> transparentize(#fde,.9) 4 rgba(255, 221, 238, 0.1) 5 >> transparentize(rgba(98,233,124,.3),.11) 6 rgba(98, 233, 124, 0.19) 7 >> transparentize(rgba(98,233,124,.3),.51) 8 rgba(98, 233, 124, 0) 9 >> fade-out(red,.9)10 rgba(255, 0, 0, 0.1)11 >> fade-out(hsla(98,6%,23%,.5),.1)12 rgba(58, 62, 55, 0.4)13 >> fade-out(hsla(98,6%,23%,.5),.6)14 rgba(58, 62, 55, 0)
    로그인 후 복사

     

     

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