Gradient Gradient IE 호환 처리 방법 설명
- 高洛峰원래의
- 2017-03-21 14:32:172115검색
caniuse(http://caniuse.com/#search=gradient)에 따르면 rgba 호환성은 IE10 이상 브라우저입니다.
예제 코드:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>gradient 兼容性处理</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parent {
width: 400px;
height: 400px;
margin: 100px;
font-size: 20px;
color: #FF0000;
border: 1px solid red;
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%);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>Chrome 브라우저 효과:
IE8 브라우저 효과(그라디언트 없음):
rgba 호환성 처리:
.parent {
width: 400px;
height: 400px;
margin: 100px;
font-size: 20px;
color: #FF0000;
border: 1px solid red;
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);
}필터 속성을 설정하는 목적은 이전 line 투명도가 작동하지 않을 때 실행됩니다. 필터: progid:DXImageTransform.Microsoft.gradient는 그라디언트를 만드는 데 사용됩니다. GradientType: 읽기 및 쓰기 가능, 색상 그라디언트 방향 설정 또는 검색:
1: 기본값. 수평 그라데이션.
0: 수직 그라데이션.
요약: IE9 이하 IE 브라우저에 대한 그라데이션 호환성 처리가 완료되었습니다.
위 내용은 Gradient Gradient IE 호환 처리 방법 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.