CSS에서 불투명도 그라디언트를 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 불투명도 그라디언트를 얻는 방법

青灯夜游

풀어 주다： 2023-01-07 11:45:00

원래의

3447명이 탐색했습니다.

CSS에서는 선형-그라디언트() 또는 방사형-그라디언트() 그라디언트 함수를 rgba()와 함께 사용하여 불투명도 그라디언트를 설정할 수 있습니다. 선형-그라디언트() 및 방사형-그라디언트()는 그라데이션을 설정할 수 있고 rgba()는 불투명도를 제어할 수 있습니다.

CSS에서 불투명도 그라디언트를 얻는 방법

이 튜토리얼의 운영 환경: 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:

CSS에서 불투명도 그라디언트를 얻는 방법

지침:

선형 그래디언트를 생성하려면 최소 두 개의 색상 노드를 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다. 구문은 다음과 같습니다.

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

로그인 후 복사

예:

CSS에서 불투명도 그라디언트를 얻는 방법

방사형 그라데이션은 중심으로 정의됩니다.

방사형 그래디언트를 생성하려면 최소 두 개의 색상 노드도 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 그라디언트의 중심, 모양(원형 또는 타원형) 및 크기도 지정할 수 있습니다. 기본적으로 그라디언트의 중심은 중심(중심점을 의미)이고 그라디언트의 모양은 타원(타원을 의미)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 의미)입니다.

문법:

 background-image:radial-gradient(shape size at position, start-color, ..., last-color);

로그인 후 복사

예:

CSS에서 불투명도 그라디언트를 얻는 방법

(동영상 공유 학습: css 동영상 튜토리얼)

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