CSS에서 불투명도 그라디언트를 얻는 방법
- 青灯夜游원래의
- 2021-07-22 11:59:513406검색
CSS에서는 선형-그라디언트() 또는 방사형-그라디언트() 그라디언트 함수를 rgba()와 함께 사용하여 불투명도 그라디언트를 설정할 수 있습니다. 선형-그라디언트() 및 방사형-그라디언트()는 그라데이션을 설정할 수 있고 rgba()는 불투명도를 제어할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서는 선형-그라디언트() 또는 방사형-그라디언트() 그라데이션 함수를 rgba()와 함께 사용하여 불투명도 그라데이션을 설정할 수 있습니다.
linear-gradient() 및 Radial-gradient() 함수는 그라데이션 효과를 설정할 수 있습니다.
linear-gradient(): 선형 그라데이션 만들기
radial-gradient(): 방사형 그라데이션 만들기
rgba() 함수는 빨간색(R), 녹색(G), 파란색(B), 투명도(A)의 중첩을 사용하여 다양한 색상을 생성합니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
div{
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
}
.div1 {
background-image: url(img/1.jpg)
}
.div2 {
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
}
.div3 {
background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
}
</style>
<div class="div1">正常图片</div><br>
<div class="div2">设置线性渐变不透明度效果的图片</div>
<div class="div3">设置径向渐变不透明度效果的图片</div>
</body>
</html>Rendering:
지침:
선형 그래디언트를 생성하려면 최소 두 개의 색상 노드를 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다. 구문은 다음과 같습니다.
background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
예:
방사형 그라데이션은 중심으로 정의됩니다.
방사형 그래디언트를 생성하려면 최소 두 개의 색상 노드도 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 그라디언트의 중심, 모양(원형 또는 타원형) 및 크기도 지정할 수 있습니다. 기본적으로 그라디언트의 중심은 중심(중심점을 의미)이고 그라디언트의 모양은 타원(타원을 의미)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 의미)입니다.
문법:
background-image:radial-gradient(shape size at position, start-color, ..., last-color);
예:
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS에서 불투명도 그라디언트를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!