css3 怎样让渐变和背景图片在IE9下同时存在?

html-css08

css3 怎样让渐变和背景图片在IE9下同时存在?,第1张

IE9基本不支持CSS3,用两层叠加就行啦。 <div style="width: 100pxheight: 100pxfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 )"> <div style="width: 100pxheight: 100pxbackground: url('image.png') no-repeat 0px 0px"></div></div>

html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

官方网站: http://css3pie.com/

演示地址: http://css3pie.com/demos/gradient-patterns/

1.兼容border-radius

2.阴影效果

3.部分 CSS3 的效果,如 多张背景图,border-image,背景颜色渐变效果

4.png 图片透明效果

兼容IE6,IE7,IE8的元素背景渐变

<!DOCTYPE html>  

<html>  

<head>  

<meta charset=utf-8 />  

<title>CSS 实现元素背景渐变</title>  

</head>  

<body>  

<style type="text/css">   

.demo {   

width:100%   

height:200px   

background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c))   

background: -webkit-linear-gradient(left, #80c1e7, #213c7c)   

background: -moz-linear-gradient(left, #80c1e7, #213c7c)   

background: -o-linear-gradient(left, #80c1e7, #213c7c)   

background: -ms-linear-gradient(left, #80c1e7, #213c7c)   

background: linear-gradient(left, #80c1e7, #213c7c)   

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80c1e7, endColorstr = #213c7c)   

}   

</style>  

<div class="demo"></div>  

</body>  

</html>