CSS와 호환되는 배경색 그라데이션을 만드는 방법에 대한 자세한 설명

최근 프로젝트에서는 양식 제출 버튼의 배경, 데이터 표시의 제목 배경 등 여러 곳에 선형 그래디언트가 사용되었습니다. 이전 방법은 1px 이미지를 잘라낸 다음-x를 반복하는 것이었습니다. 아래에서는 CSS를 사용하여 이 효과를 얻는 방법을 소개하겠습니다.

css3: 선형 그라데이션

예: 검정색 그라데이션을 흰색으로 변경하는 경우 코드는 다음과 같습니다.

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

지침: 선형 그라데이션 특정 사용법여기를 클릭하여 입력하세요.

ie 필터: filter

linear-gradient는 ie9 이하에서 지원되지 않으므로 ie6 - ie8의 경우 filter를 사용하여 문제를 해결할 수 있으며 코드는 다음과 같습니다.

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

필터는 다음과 같습니다. 즉, 개인 속성이므로 IE9에 대해 필터 효과를 별도로 처리해야 합니다. 코드는 다음과 같습니다.

:root {filter:none;}

요약:

요약하면 선형 그래디언트의 호환 가능한 작성 방법은 다음과 같습니다.

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}:root .gradient{filter:none;}

위 내용은 CSS와 호환되는 배경색 그라데이션을 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!