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

집

일일 프로그램

CSS 지식

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

藏色散人

Oct 16, 2018 am 09:35 AM

이 글에서는 주로 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에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)

네 번째 속성:

linear-gradient()도 선형 그라데이션을 나타내지만 이는 표준 구문입니다.

이 예에서 해당 매개변수는 왼쪽에서 오른쪽으로 시작하여 검은색에서 시작하여 천천히 투명하게 전환되는 선형 그라데이션을 나타냅니다.

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

그러면 위에서 언급한 두 번째와 세 번째 방법은 간단하게 이해하시면 권장되지 않습니다.

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

이 글은 CSS3의 배경색 그라데이션 구현에 대한 간략한 소개입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

프런트엔드 관련 지식을 더 알고 싶다면 PHP 중국어 웹사이트 css3 비디오 튜토리얼, Bootstrap 비디오 튜토리얼 및 기타 관련 프론트엔드 튜토리얼을 따라가실 수 있습니다. 누구나 배우고 참고하실 수 있습니다. !

위 내용은 CSS3에서 배경색 그라데이션을 구현하는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는