CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)-CSS 지식-php.cn

CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)

藏色散人

풀어 주다： 2018-10-16 09:52:35

원래의

6589명이 탐색했습니다.

이 글에서는 주로 css3 배경 그라데이션 구현 방법을 요약하여 소개합니다.

프런트 엔드 개발 과정에서 웹사이트 스타일 콘텐츠를 풍부하게 하기 위해 배경색 그라데이션은 시각적 효과가 매우 좋습니다. 소위 CSS3 그라디언트(그라디언트)를 사용하면 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다.

이미 프론트엔드를 시작하신 분들에게는 css3 배경 그라데이션 구현이 매우 간단합니다. 그러나 초보 친구에게는 아직 명확하지 않을 수 있습니다.

이제 간단한 코드 예제를 기반으로 배경색 그라데이션 효과를 얻기 위한 css3 방법을 요약하겠습니다.

코드 예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3背景渐变实例</title>
<head>
    <style>
        #grad{
            background: black;
            /* 第一种：-webkit-linear-gradient()，统配各种浏览器*/
            background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1));
            /* 第二种：-o-linear-gradient，Opera浏览器*/
            background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
            /* 第三种：-moz-linear-gradient，火狐浏览器*/
            background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
            /* 第四种：linear-gradient()，统配各种浏览器*/
            background: linear-gradient(to left,rgba(255,0,0,0),rgba(0,0,0,1));
        }
    </style>
</head>
<body id="grad">
</body>
</html>

로그인 후 복사

여기에서는 브라우저 호환성에 따라 배경색 그라데이션을 얻는 네 가지 방법을 소개합니다. 브라우저 비호환성을 방지하려면 첫 번째와 네 번째 방법을 사용하는 것이 좋습니다.

첫 번째 속성:

-webkit-linear-gradient()은 선형 그라데이션(선형 그라데이션) - 아래/위/왼쪽/오른쪽/대각선을 나타냅니다.

이 예에서 해당 매개변수는 왼쪽부터 시작하는 선형 그라데이션을 나타냅니다. 처음에는 투명하다가 천천히 검은색으로 변합니다.

효과는 아래와 같습니다:

CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)