JSP 배경 그라데이션 색상을 작성하는 방법
- (*-*)浩원래의
- 2019-05-29 13:28:324532검색
div의 배경색을 그라데이션으로 표시하기 위해 어떤 사람들은 아티스트를 사용하여 다양한 색상 막대를 잘라낸 다음 배경 이미지를 사용하여 반복-x를 채웁니다. 여기서는 CSS를 사용하여 색상의 그라데이션을 제어합니다. 참고: 브라우징은 여기에서 해결해야 합니다. 호환성 문제
IE 브라우저의 그라데이션 배경
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
관련 지침:
위의 필터 코드에는 주로 startcolorstr, endcolorstr 및 순서대로 세 가지 매개 변수가 있습니다. 그래디언트 유형. 그 중,gradientType=1은 수평 그래디언트를 나타내고,gradientType=0은 수직 그래디언트를 나타냅니다. startcolorstr="color"는 그라디언트의 시작 색상을 나타내고, endcolorstr="color"는 그라디언트 끝의 색상을 나타냅니다.
위 코드는 빨간색에서 파란색으로의 그라데이션을 구현하지만 투명도 변경은 포함하지 않습니다. 이는 IE가 현재 불투명도 속성과 RGBA 색상을 지원하지 않기 때문입니다. IE에서 투명도 변경을 위해서는 여전히 IE 필터를 사용해야 합니다. IE의 투명도 필터 기능은 상대적으로 강력합니다. 이 기능은 Firefox 또는 Safari 브라우저의 CSS 그라데이션 배경 그라데이션 사용과 유사합니다.
Firefox 브라우저에서 그라데이션 배경
Firefox 브라우저(Firefox 3.6+)에서 그라데이션 배경을 구현하려면 CSS3 그라데이션 속성인 -moz-linear-gradient 속성을 사용해야 합니다. 아래 코드를 참조하세요:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
Chrome 브라우저에서 그라데이션 배경 구현
Chrome/Safari 브라우저와 같은 웹킷 코어가 있는 브라우저의 경우 그라데이션 배경 구현에는 CSS3 그라데이션 방법, CSS-gradient, 특히 -webkit도 사용됩니다. 그래디언트이므로 Firefox 브라우저를 사용할 때 약간의 차이가 있습니다.
아아아아위 내용은 JSP 배경 그라데이션 색상을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!