CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)
- 藏色散人원래의
- 2018-10-16 09:35:176541검색
이 글에서는 주로 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()은 선형 그라데이션(선형 그라데이션) - 아래/위/왼쪽/오른쪽/대각선을 나타냅니다.
이 예에서 해당 매개변수는 왼쪽부터 시작하는 선형 그라데이션을 나타냅니다. 처음에는 투명하다가 천천히 검은색으로 변합니다.
효과는 아래와 같습니다:
네 번째 속성:
linear-gradient()도 선형 그라데이션을 나타내지만 이는 표준 구문입니다.
이 예에서 해당 매개변수는 왼쪽에서 오른쪽으로 시작하여 검은색에서 시작하여 천천히 투명하게 전환되는 선형 그라데이션을 나타냅니다.
그러면 위에서 언급한 두 번째와 세 번째 방법은 간단하게 이해하시면 권장되지 않습니다.
참고: 선형 그래디언트를 만들려면 최소 두 개의 색상 노드를 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다.
이 글은 CSS3의 배경색 그라데이션 구현에 대한 간략한 소개입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
프런트엔드 관련 지식을 더 알고 싶다면 PHP 중국어 웹사이트 css3 비디오 튜토리얼, Bootstrap 비디오 튜토리얼 및 기타 관련 프론트엔드 튜토리얼을 따라가실 수 있습니다. 누구나 배우고 참고하실 수 있습니다. !
위 내용은 CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!