<script type="text/javascript">
var setGradient = (function(){
var p_dCanvas = document.createElement('canvas');
var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function');
var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;
var p_isIE = false;
try{
p_dCtx.canvas.toDataURL();
}catch(err){
p_useCanvas = false ;
};
if(p_useCanvas){
return function (dEl , sColor1 , sColor2 , bRepeatY ){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
var nW = dEl.offsetWidth;
var nH = dEl.offsetHeight;
p_dCanvas.width = nW;
p_dCanvas.height = nH;
var dGradient;
var sRepeat;
if(bRepeatY){
dGradient = p_dCtx.createLinearGradient(0,0,nW,0);
sRepeat = 'repeat-y';
}else{
dGradient = p_dCtx.createLinearGradient(0,0,0,nH);
sRepeat = 'repeat-x';
}
dGradient.addColorStop(0,sColor1);
dGradient.addColorStop(1,sColor2);
p_dCtx.fillStyle = dGradient ;
p_dCtx.fillRect(0,0,nW,nH);
var sDataUrl = p_dCtx.canvas.toDataURL('image/png');
with(dEl.style){
backgroundRepeat = sRepeat;
backgroundImage = 'url(' + sDataUrl + ')';
backgroundColor = sColor2;
};
};
}else if(p_isIE){
p_dCanvas = p_useCanvas = p_dCtx = null;
return function (dEl , sColor1 , sColor2 , bRepeatY){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
dEl.style.zoom = 1;
var sF = dEl.currentStyle.filter;
dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('');
};
}else{
p_dCanvas = p_useCanvas = p_dCtx = null;
return function(dEl , sColor1 , sColor2 ){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
with(dEl.style){
backgroundColor = sColor2;
};
};
}
})();
</script>
setGradient('divId','#000000','#ffffff',0);
相关推荐
DIV背景色渐变在以前的文章中也有介绍过,但并没有同时兼容IE、火狐、谷歌,而本文的这个示例却可以同时兼容,建议喜欢的朋友参考下
一个简单div+css背景渐变色代码,大家参考使用吧
CSS控制DIV层背景颜色渐变是一个相当不错的效果,看起来很夺目的,本文也尝试着实现一个类似这样的效果,感兴趣的朋友可不要错过了啊,或许本文所提供的对你学习css有所帮,好了话不多说切入正题
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
CSS 设计指南学习小结
使用div+css,实现的背景颜色的渐变,兼容谷歌,火狐,IE6以上浏览器
本节向大家爱描述一下如何设置DIV背景颜色透明度,opacityOpacity设置或检索透明渐变的开始透明度,Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征...
本次案例为(背景颜色渐变),运用css3就能实现背景颜色渐变的效果; HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
调用方式 onclick="ChuangJianDIV('要弹出的组建ID','弹出DIV的宽','弹出DIV的高','遮蔽div的透明度','弹出div的速度','遮蔽div的背景色','弹出div的背景色');" 如:onclick="ChuangJianDIV('divID','500','300','...
效果图如下: 实例代码如下: 复制代码代码如下:<...css3给按钮添加背景渐变动画</title><!–@author:SM @email:sm0210@qq.com@desc: css3给按钮添加背景渐变动画–><style type=”t
这个示例代码就是上面是红色,下面是黑色,渐变色的。 复制代码代码如下: <style type=”text/css”> #round { height: 200px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, ...
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CSS 很直观, 但显然...
1.background: linear-gradient 背景为渐变色属性 2.利用css3中动画特性animation,实现背景从左至右变化(color_move) 3.为了实现渐变效果,将background的宽度拉长至400% 上代码: html: <div class=btn_demo> ...
javascript+css一张背景图片的不同切换,DIV背景图片变暗,CSS渐变色,设置div的透明背景,10个非常有用的CSS技巧,图片凸起效果,点击div背景图切换,动态背景