>웹 프론트엔드 >CSS 튜토리얼 >CSS 글꼴 투명도를 설정하는 방법은 무엇입니까?

CSS 글꼴 투명도를 설정하는 방법은 무엇입니까?

不言
不言원래의
2018-10-30 15:27:3630079검색

CSS에서 구현할 수 있는 아름다운 스타일은 다양합니다. CSS에서 설정한 스타일은 웹페이지 전체를 매우 아름답게 보이게 해줍니다. 오늘 글에서는 CSS에서 글꼴의 투명도를 설정하는 방법을 소개하겠습니다. 웹 페이지에서 투명합니다.

css3에 새로운 rgba 속성이 추가되었습니다. 소위 rgba 속성은 R(빨간색) G(녹색) B(파란색) + ALPHA(투명도)의 세 가지 색상입니다. 이 rgba 속성 글꼴 투명도를 설정하는 방법.

먼저 RGBA를 사용하여 배경색 투명도를 설정하는 것은 매우 간단합니다. 예를 간단히 살펴보겠습니다. (관련 권장 사항:

CSS에서 배경색 투명도를 설정하는 방법은 무엇입니까? )

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
.div{
    background-color:rgba(220,38,38,0.2);
    width:100px;
    height:100px;
}
</style>
</head>
<body>
<div class="div">
    我是文字
</div>
</body>
</html>

배경색 투명도를 설정하는 RGBA의 효과는 다음과 같습니다.

CSS 글꼴 투명도를 설정하는 방법은 무엇입니까?

위 코드는 매우 간단하지 않나요? 그렇다면 글꼴 투명도를 설정하면 RGBA를 어떻게 사용할 수 있을까요?

사실 글꼴의 투명도를 설정하는 방법도 매우 간단합니다. 색상의 rgba 속성을 설정할 수 있습니다.

RGBA에서 글꼴 투명도를 설정하는 구체적인 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
.div{
    background:red;
    width:100px;
    height:100px;
    color:rgba(255,255,255,0.4)
}
    </style>
</head>
<body>
<div class="div">
    我是透明文字
</div>
</body>
</html>

글꼴 투명도의 효과는 다음과 같습니다.

CSS 글꼴 투명도를 설정하는 방법은 무엇입니까?

이 문서는 여기서 끝납니다. CSS의 투명도 설정에 대한 관련 내용은 다음을 참조하세요. php 중국어

css 동영상 튜토리얼css3 동영상 튜토리얼 열로 이동하여 학습하세요.

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

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