집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 투명도를 설정하는 두 가지 방법

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

php中世界最好的语言원래의: 2018-03-21 16:34:411904검색

이번에는 CSS에서 투명도를 설정하는 두 가지 방법을 알려드리겠습니다. CSS에서 투명도를 설정할 때 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. 배경색을 투명하게 설정하려면 rgba를 사용하세요

효과는 다음과 같습니다.

<body>
    <p id="box">
        你好啊！
    </p>
</body>
body {
    background-color:red;
}
#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgba(182,255,0,.5);
}

2. 불투명도를 사용하여 배경색을 투명하게 설정합니다

#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgb(182,255,0);
    opacity:0.5;
}

요약: 두 가지 효과를 통해 비교해 보면 불투명도가 글꼴의 투명도에도 영향을 미친다는 사실을 발견했습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!