집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 투명도 그라디언트를 설정하는 방법

CSS에서 투명도 그라디언트를 설정하는 방법

藏色散人원래의: 2021-02-03 09:24:5317729검색

CSS에서 투명도 그라디언트를 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 이미지를 삽입하고 마지막으로 "linear-gradient()" 기능을 사용하고 rgba와 협력하여 투명도 그라디언트를 설정합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 투명도 그라디언트 설정

CSS에서는 rgba()와 함께 선형-그라디언트() 함수를 사용하여 투명도 그라디언트를 설정할 수 있습니다. Linear-gradient() 함수는 그라데이션을 설정하는 데 사용되며 rgba() 설정은 색상 투명도를 설정하는 데 사용됩니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1.jpg)
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: url(1.jpg)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
<div class="div2">正常图片</div>
</body>
</html>

Rendering:

CSS에서 투명도 그라디언트를 설정하는 방법

설명:

linear-gradient() 함수는 선형 그라데이션 "이미지"를 만드는 데 사용됩니다.

선형 그래디언트를 만들려면 그래디언트 효과의 시작점과 방향(각도로 지정)을 설정해야 합니다. 끝 색상도 정의해야 합니다. 중지 색상은 Gecko가 만들기를 원하는 부드러운 전환이며, 더 복잡한 그라데이션 효과를 만들기 위해 더 많은 색상을 지정할 수 있지만 적어도 두 개를 지정해야 합니다.

css 구문:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

RGBA ()

RGBA는 (Red-Green-Blue-Alpha)를 의미합니다. RGB에서 확장되어 색상 값에 투명도를 설정하는 "알파" 채널을 포함합니다.

CSS에서 투명도 그라디언트를 설정하는 방법

관련 기사