CSS에서 투명도를 설정하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 투명도를 설정하는 방법

醉折花枝作酒筹

Apr 06, 2021 pm 06:07 PM

css투명도

CSS에서 투명도를 설정하는 방법: 1. rgba()를 사용하여 색상 투명도를 설정합니다. 구문 "배경:rgba(R,G,B,A)" 2. 불투명도 속성을 사용하여 배경 투명도를 설정합니다. 구문 "불투명도: 투명값; ”, 값 범위는 “0.0~1.0”입니다.

CSS에서 투명도를 설정하는 방법

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

1. css rgba()는 색상 투명도를 설정합니다.

구문:

rgba（R,G,B,A）;

RGBA는 Red(빨간색) Green(녹색) Blue(파란색) 및 Alpha(불투명도)라는 단어의 약어입니다. RGBA 색상 값은 개체의 불투명도를 지정하는 알파 채널이 포함된 RGB 색상 값의 확장입니다. alpha 通道 - 它规定了对象的不透明度。

rgba（)里的值的介绍：

R：红色值。正整数（0~255）

G：绿色值。正整数（0~255）

B：蓝色值。正整数（0~255）

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

rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rgba()</title>
        <style>
            .demo{
                width: 350px;
                height: 300px;
                margin: 50px auto;
            }
            .demo *{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
            }
            .demo1{
                background:rgba(255,0,0,1);
            }
            .demo2{
               background:rgba(255,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <p class="demo">
            <p class="demo1">背景色不透明，文字不透明！</p>
            <p class="demo2">背景色半透明，文字不透明！</p>
        </p>
    </body>
    </html>

效果图：

CSS에서 투명도를 설정하는 방법

上例中，设置的颜色值是一样的，只是透明度不同。这样看不出来有除了颜色之外的不同，我们在父容器demo上也设置一个背景色，这样的效果图：

CSS에서 투명도를 설정하는 방법

这样就可以看出：第一个盒子（demo1）没有设置透明度，红色完全把下面盒子（demo）的颜色给覆盖住了；第二个盒子（demo2）设置了透明度，使得颜色半透明，没有把下面盒子（demo）的颜色给完全覆盖，而是混合显示了。

二、css opacity属性设置背景透明度

语法：

opacity: value ;

value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。

opacity属性具有继承性，会使容器中的所有元素都具有透明度；

代码实例：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>opacity属性</title>
        <style>
            .demo{
                width: 280px;
                height: 140px;
                margin: 50px auto;
            }
            .demo1,.demo2{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
                background:#2DC4CB;
            }
            .demo1{
                opacity:1;
            }
            .demo2{
                opacity:0.5;
            }
        </style>
    </head>
    <body>
        <p class="demo">
            <p class="demo1">
                <p>背景色不透明，文字不透明！</p>
            </p>
            <p class="demo2">
                <p>背景色透明，文字也透明！</p>
            </p>
        </p>
    </body></html>

效果图：

CSS에서 투명도를 설정하는 방법
opacity:0.5;使得demo2容器的所以元素都呈现半透明。

总结： rgba()方法与opacity

rgba()의 값 소개: R: 빨간색 값. 양의 정수(0~255)

🎜G: 녹색 값. 양의 정수(0~255)🎜🎜B: 파란색 값. 양의 정수 (0~255)🎜🎜A: 투명성. 값은 0에서 1 사이입니다.🎜🎜rgba()는 색상 투명도를 간단히 설정할 수 있으며 페이지 레이아웃에 다양하게 적용할 수 있습니다. 예를 들어 배경을 투명하게 만들지만 위의 텍스트는 불투명합니다. 🎜🎜코드 예: 🎜rrreee🎜🎜렌더링: 🎜🎜🎜🎜 CSS에서 투명도를 설정하는 방법

🎜🎜위 예시에서는 설정된 색상 값은 동일하지만 투명도가 다릅니다. 이런 식으로 색상 이외의 차이점은 볼 수 없습니다. 또한 상위 컨테이너 demo에 배경색을 설정했습니다. 🎜🎜 여기에 그림 설명 삽입

🎜🎜보시다시피: 첫 번째 상자(demo1)에는 투명도가 설정되지 않았습니다. 빨간색입니다. 아래 상자(데모)의 색상은 완전히 덮여 있습니다. 두 번째 상자(demo2)의 투명도는 색상을 반투명하게 설정했지만 아래 상자(데모)의 색상은 완전히 덮이지 않았습니다. 하지만 혼합되어 표시됩니다. 🎜🎜🎜2. CSS 불투명도 속성은 배경 투명도를 설정합니다. 🎜🎜🎜 구문: 🎜rrreee🎜값 : 0.0(완전 투명)에서 1.0(완전 불투명)까지 불투명도를 지정합니다. 🎜🎜🎜opacity 속성은 상속되어 컨테이너의 모든 요소를 투명하게 만듭니다. 🎜🎜코드 예: 🎜rrreee🎜🎜렌더링: 🎜🎜🎜🎜 여기에 이미지 설명 삽입

🎜 opacity:0.5; 데모2 컨테이너의 모든 요소를 반투명하게 만듭니다. 🎜🎜🎜요약: 🎜 rgba() 메서드와 opacity 메서드 모두 투명 효과를 얻을 수 있지만 rgba()는 요소의 색상이나 배경에만 작동합니다. color(rgb()가 없는 투명 요소의 하위 요소 설정은 투명도 효과를 상속하지 않습니다.) 불투명도는 요소 자체에 영향을 미칠 뿐만 아니라 요소 내의 모든 하위 요소를 투명하게 만드는 상속입니다. 🎜🎜동영상 공유 학습: c🎜ss 동영상 튜토리얼🎜🎜

위 내용은 CSS에서 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사