지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS3의 새로운 색상 모드는 무엇입니까

CSS3의 새로운 색상 모드는 무엇입니까

青灯夜游
풀어 주다： 2023-01-04 09:34:29
원래의
3138명이 탐색했습니다.

css에는 3가지 새로운 색상 모드가 추가되었습니다. 1. "rgba(255,0,0,0.5)"와 같은 RGB 모드에 알파 투명도를 추가하는 RGBA 모드 2. "hsl( 360)과 같은 HSL 모드 ,50%,50%)"; 3. HSL 모드에 알파 투명도를 추가하는 HSLA 모드.

CSS3의 새로운 색상 모드는 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

1. CSS1&2 색상 표현 방식(W3C 표준)

1. 색상명 방식 (색상 키워드를 사용하여 해당 색상을 표현합니다.)

예: red(빨간색), blue( 파란색), 분홍색(핑크)

장점: 특정 색상에 대해 편리하고 빠르고 정확합니다.

단점:

　제한된 색상 수를 나타냅니다.

투명 색상을 지원하지 않습니다.

2. HEX 모드 16진수 모드(16진수를 사용하여 색상 표현)

Syntax: 

#RRGGBB 或 #RGB
로그인 후 복사

값:

　RR: 빨간색 값입니다. 16진수 양의 정수

　GG: 녹색 값입니다. 16진수 양의 정수

　BB: 파란색 값. 16진수 양의 정수

값 범위: 00-FF

예: #FF0000 빨간색 #FFFF00 노란색. #FF0000红色 #FFFF00 黄色。

优点：表示颜色种类多，使用较方便

缺点：

　　16进制单位换算很成问题

　　不支持透明颜色。

　　特定颜色需要工具配合或者一定的颜色调配知识

3、RGB方式 三原色配色方式

语法：

RGB(R,G,B)
로그인 후 복사

取值：

　　R： 红色值。正整数 | 百分数

　　G： 绿色值。正整数 | 百分数

　　B： 蓝色值。正整数 | 百分数

取值范围:0~255或者0%~100%

例如：rgb(255,0,0)红色 rgb(255,255,0)黄色

优点：表示颜色种类多，使用较方便

缺点：

　　不支持透明颜色

　　特定颜色需要工具配合或者一定的颜色调配知识

二、CSS3 新增颜色表示方式

1、RGBA模式

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

语法：

RGBA(R,G,B,A)
로그인 후 복사

取值：

　　R： 红色值。正整数 | 百分数

　　G： 绿色值。正整数 | 百分数

　　B： 蓝色值。正整数 | 百分数

　　A： Alpha透明度。取值0~1之间。

例如:rgba(255,0,0,0.5)半透明红色

<style type="text/css">
    body{background:rgba(255,0,0,1)}
    div{width:300px;
        height:300px;
        background:rgba(0,0,255,0.4);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>
    猜猜我在哪里
    <div></div>
</body>
로그인 후 복사

2、HSL模式(色轮模式没有透明度)

语法:

HSL(H,S,L)
로그인 후 복사

取值：

　　H： Hue(色调)。–0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

　　S： Saturation(饱和度)。取值为：0.0% - 100.0%

　　L： Lightness(亮度)。取值为：0.0% - 100.0%

例如:hsl(360,50%,50%) 红色

<style type="text/css">
    body{background:rgba(0,0,255,0.5);}
    div{width:300px;
        height:300px;
        background:hsl(140,50%,50%);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<body>
    <div></div>
</body>
로그인 후 복사

3、HSLA模式(色轮模式有透明度)

语法:

HSLA(H,S,L,A)
로그인 후 복사

取值：

　　H： Hue(色调)。–0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

　　S： Saturation(饱和度)。取值为：0.0% - 100.0%

　　L： Lightness(亮度)。取值为：0.0% - 100.0%

　　A： Alpha透明度。取值0~1之间。

例如：hsl(360,50%,50%,0.5

장점: 색상 종류가 많아 사용하기 더 편리합니다.

단점:

　16진수 단위 변환이 매우 문제가 됩니다

　투명 색상은 지원하지 않습니다. 특정 색상에는 도구 조정 또는 특정 색상 혼합 지식이 필요합니다

3. RGB 방식 3원색 매칭 방식


Syntax

:

<style>
        body{background:HSL(0,100%,50%)}
        div{width:300px;
            height:300px;
            background:HSLA(230,100%,50%,0);
            position:absolute;
            top:0;
            left:0;
        }
    </style>
    </head>
    <body>
        猜猜我在哪里
        <div></div>
    </body>
로그인 후 복사

값: 　R: 빨간색 값. 양의 정수 | 백분율

　G: 녹색 값. 양의 정수 | 백분율

　B: 파란색 값. 양의 정수 | 퍼센트

🎜값 범위: 🎜0~255 또는 0%~100%🎜🎜예: rgb(255,0,0)빨간색rgb(255,255,0) 노란색🎜🎜장점: 다양한 색상을 표현하고 사용하기 더 편리합니다🎜🎜단점: 🎜🎜투명 색상을 지원하지 않습니다.🎜🎜 특정 색상은 도구 조정이나 특정 색상 혼합 지식이 필요합니다🎜🎜🎜🎜 2 . CSS3 표현의 새로운 색상 🎜🎜🎜🎜🎜🎜 1. RGBA 모드 🎜🎜🎜🎜 이 색상 모드는 RGB 모드에 알파 투명도가 추가된다는 점을 제외하면 RGB와 동일합니다. 🎜🎜구문: ​​🎜
<style type="text/css">
    body{background:hsl(270,100%,50%)}
    p{
        font-size:50px;
        font-family:"黑体";
        /*浏览器私有属性*/
        -webkit-text-fill-color:transparent;/*设置文本透明*/
        /*使用rgba(0,0,0,0);也可以实现全透明模式*/
        -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/
        /*W3C标准属性*/
        /*text-fill-color:transparent;*/
        /*text-stroke:2px yellow;*/
    
    }
</style>
<body>
    <p>2012年过去了，最忙的是元芳，你怎么看？</p>
</body>
로그인 후 복사
🎜🎜값: 🎜🎜🎜　R: 빨간색 값. 양의 정수 | 백분율 🎜🎜　G: 녹색 값. 양의 정수 | 백분율 🎜🎜　B: 파란색 값. 양의 정수 | 백분율 🎜🎜　A: 알파 투명도. 값은 0~1 사이입니다. 🎜🎜예: rgba(255,0,0,0.5) 반투명 빨간색🎜
<style>
    body{background:red}
    div{background:blue;
        width:300px;
        height:300px;
        opacity:0.5;
        position:absolute;
        top:0;
        left:0
    }
</style>
</head>
<body>
    看到我你就成功了
    <div></div>
</body>
로그인 후 복사
로그인 후 복사
🎜🎜🎜2, HSL 모드🎜🎜(컬러 휠 모드에는 투명도가 없음)🎜🎜구문:🎜
background-image: -ms-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Mozilla Firefox */ 
     background-image: -moz-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Opera */ 
     background-image: -o-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Webkit (Safari/Chrome 10) */ 
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D35644), color-stop(1, #31264D)) !important;/* Webkit (Chrome 11+) */ 
     background-image: -webkit-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* W3C Markup, IE10 Release Preview */ 
     background-image: linear-gradient(to bottom, #D35644 0%, #31264D 100%) !important; }
로그인 후 복사
로그인 후 복사
🎜 값 가져오기: 🎜🎜　 H: Hue(색조). -0(또는 360)은 빨간색을 나타내고, 120은 녹색을 나타내고, 240은 파란색을 나타내며, 다른 값을 사용하여 색상을 지정할 수도 있습니다. 값은 0 - 360🎜🎜　 S: 채도입니다. 값은: 0.0% - 100.0%🎜🎜　 L: 밝기(밝기)입니다. 값은 0.0% - 100.0%🎜🎜예: hsl(360,50%,50%) Red🎜🎜🎜
<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,50%,0.1)}
    div:nth-child(2){background:HSLA(120,100%,50%,0.2)}
    div:nth-child(3){background:HSLA(120,100%,50%,0.3)}
    div:nth-child(4){background:HSLA(120,100%,50%,0.4)}
    div:nth-child(5){background:HSLA(120,100%,50%,0.5)}
    div:nth-child(6){background:HSLA(120,100%,50%,0.6)}
    div:nth-child(7){background:HSLA(120,100%,50%,0.7)}
    div:nth-child(8){background:HSLA(120,100%,50%,0.8)}
    div:nth-child(9){background:HSLA(120,100%,50%,0.9)}
    div:nth-child(10){background:HSLA(120,100%,50%,1.0)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
로그인 후 복사
로그인 후 복사
🎜🎜🎜3.HSLA 모드🎜🎜(컬러 휠 모드에는 투명도가 있음)🎜 🎜 구문: 🎜
<style>
            div{height:30px}
            div:nth-child(1){background:HSLA(120,100%,50%,1)}
            div:nth-child(2){background:HSLA(120,90%,50%,1)}
            div:nth-child(3){background:HSLA(120,80%,50%,1)}
            div:nth-child(4){background:HSLA(120,70%,50%,1)}
            div:nth-child(5){background:HSLA(120,60%,50%,1)}
            div:nth-child(6){background:HSLA(120,50%,50%,1)}
            div:nth-child(7){background:HSLA(120,40%,50%,1)}
            div:nth-child(8){background:HSLA(120,30%,50%,1)}
            div:nth-child(9){background:HSLA(120,20%,50%,1)}
            div:nth-child(10){background:HSLA(120,10%,50%,1)}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
로그인 후 복사
로그인 후 복사
🎜값: 🎜🎜　 H: Hue(색조). -0(또는 360)은 빨간색을 나타내고, 120은 녹색을 나타내고, 240은 파란색을 나타내며, 다른 값을 사용하여 색상을 지정할 수도 있습니다. 값은 0 - 360🎜🎜　 S: 채도입니다. 값은: 0.0% - 100.0%🎜🎜　 L: 밝기(밝기)입니다. 값은 0.0% - 100.0%🎜🎜　A: 알파 투명도입니다. 값은 0~1 사이입니다. 🎜🎜예: hsl(360,50%,50%,0.5) red🎜
<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,100%,1)}
    div:nth-child(2){background:HSLA(120,100%,90%,1)}
    div:nth-child(3){background:HSLA(120,100%,80%,1)}
    div:nth-child(4){background:HSLA(120,100%,70%,1)}
    div:nth-child(5){background:HSLA(120,100%,60%,1)}
    div:nth-child(6){background:HSLA(120,100%,50%,1)}
    div:nth-child(7){background:HSLA(120,100%,40%,1)}
    div:nth-child(8){background:HSLA(120,100%,30%,1)}
    div:nth-child(9){background:HSLA(120,100%,20%,1)}
    div:nth-child(10){background:HSLA(120,100%,10%,1)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
로그인 후 복사
로그인 후 복사
🎜 (학습 동영상 공유: 🎜css 동영상 튜토리얼🎜)🎜🎜🎜🎜3. 기타 속성🎜🎜🎜 🎜 🎜🎜1. transparent🎜🎜🎜🎜 투명한 색상을 나타내는 특수 색상 값입니다. 색상으로 직접 사용할 수 있습니다. 🎜🎜예: color:transparent 글꼴 색상을 transparent🎜
<style>
#div1 { width:200px; height:200px; border:1px solid #333;
background:-moz-linear-gradient(top, red, yellow);
background:-webkit-linear-gradient(top, red, yellow);
background:-ms-linear-gradient(top, red, yellow);
background:linear-gradient(top, red, yellow);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=yellow)";
+background:#f9f9f9;/*兼容IE9,8,7*/
}
</style>

</head>

<body>

<div id="div1"></div>

</body>
로그인 후 복사
로그인 후 복사
🎜2로 설정하고, 🎜Opacity🎜🎜attribute🎜🎜🎜기능: 요소의 투명도를 설정합니다. 🎜🎜값: 0~1🎜 사이

注意：对于尚不支持opacity属性的IE浏览器

滤镜：filter:alpha(opacity=50) 仅限IE

<style>
    body{background:red}
    div{background:blue;
        width:300px;
        height:300px;
        opacity:0.5;
        position:absolute;
        top:0;
        left:0
    }
</style>
</head>
<body>
    看到我你就成功了
    <div></div>
</body>
로그인 후 복사
로그인 후 복사

四、CSS3 颜色使用实例

background-image: -ms-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Mozilla Firefox */ 
     background-image: -moz-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Opera */ 
     background-image: -o-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* Webkit (Safari/Chrome 10) */ 
     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D35644), color-stop(1, #31264D)) !important;/* Webkit (Chrome 11+) */ 
     background-image: -webkit-linear-gradient(top, #D35644 0%, #31264D 100%) !important;/* W3C Markup, IE10 Release Preview */ 
     background-image: linear-gradient(to bottom, #D35644 0%, #31264D 100%) !important; }
로그인 후 복사
로그인 후 복사

1、模拟渐变效果

使用透明度来模拟渐变

<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,50%,0.1)}
    div:nth-child(2){background:HSLA(120,100%,50%,0.2)}
    div:nth-child(3){background:HSLA(120,100%,50%,0.3)}
    div:nth-child(4){background:HSLA(120,100%,50%,0.4)}
    div:nth-child(5){background:HSLA(120,100%,50%,0.5)}
    div:nth-child(6){background:HSLA(120,100%,50%,0.6)}
    div:nth-child(7){background:HSLA(120,100%,50%,0.7)}
    div:nth-child(8){background:HSLA(120,100%,50%,0.8)}
    div:nth-child(9){background:HSLA(120,100%,50%,0.9)}
    div:nth-child(10){background:HSLA(120,100%,50%,1.0)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
로그인 후 복사
로그인 후 복사

使用饱和度模拟渐变

<style>
            div{height:30px}
            div:nth-child(1){background:HSLA(120,100%,50%,1)}
            div:nth-child(2){background:HSLA(120,90%,50%,1)}
            div:nth-child(3){background:HSLA(120,80%,50%,1)}
            div:nth-child(4){background:HSLA(120,70%,50%,1)}
            div:nth-child(5){background:HSLA(120,60%,50%,1)}
            div:nth-child(6){background:HSLA(120,50%,50%,1)}
            div:nth-child(7){background:HSLA(120,40%,50%,1)}
            div:nth-child(8){background:HSLA(120,30%,50%,1)}
            div:nth-child(9){background:HSLA(120,20%,50%,1)}
            div:nth-child(10){background:HSLA(120,10%,50%,1)}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
로그인 후 복사
로그인 후 복사

使用亮度来实现模拟渐变

<style>
    div{height:30px}
    div:nth-child(1){background:HSLA(120,100%,100%,1)}
    div:nth-child(2){background:HSLA(120,100%,90%,1)}
    div:nth-child(3){background:HSLA(120,100%,80%,1)}
    div:nth-child(4){background:HSLA(120,100%,70%,1)}
    div:nth-child(5){background:HSLA(120,100%,60%,1)}
    div:nth-child(6){background:HSLA(120,100%,50%,1)}
    div:nth-child(7){background:HSLA(120,100%,40%,1)}
    div:nth-child(8){background:HSLA(120,100%,30%,1)}
    div:nth-child(9){background:HSLA(120,100%,20%,1)}
    div:nth-child(10){background:HSLA(120,100%,10%,1)}
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
로그인 후 복사
로그인 후 복사

使用背景颜色：

<style>
#div1 { width:200px; height:200px; border:1px solid #333;
background:-moz-linear-gradient(top, red, yellow);
background:-webkit-linear-gradient(top, red, yellow);
background:-ms-linear-gradient(top, red, yellow);
background:linear-gradient(top, red, yellow);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=yellow)";
+background:#f9f9f9;/*兼容IE9,8,7*/
}
</style>

</head>

<body>

<div id="div1"></div>

</body>
로그인 후 복사
로그인 후 복사

更多编程相关知识，请访问：编程视频！！

위 내용은 CSS3의 새로운 색상 모드는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css3 색상 모드
원천：php.cn
이전 기사：CSS에서 가로 가운데 맞춤을 설정하는 방법 다음 기사：인라인을 사용하여 CSS 스타일 시트를 도입하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿