背景色渐变
Ⅰ div背景颜色怎样渐变 css实现div层背景颜色渐变代码
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变:
3.1、从上到下的线性渐变:
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
3.2、从左到右的线性渐变:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
3.3、线性渐变 - 对角:
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
4.径向渐变:
4.1、颜色结点均匀分布的径向渐变:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
4.2、颜色结点不均匀分布的径向渐变::
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
4.3、形状为圆形的径向渐变:
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
5:望采纳
Ⅱ Photoshop如何设置渐变色的背景颜色
选择原有渐变色的图层,选择渐变工具,在上面点击属性栏,进入渐变编辑器.可以修改颜色.
Ⅲ photoshop线渐变工具怎么设置方式前景色到背景色渐变
通常情况下,选择了渐变工具后,会默认模式为前景色到背景色的渐变。如果不是,可以在选择了渐变工具时,选择右上方的的渐变条,点击,弹出渐变编辑器,选中前景色到背景色渐变。
Ⅳ 怎样用CSS实现背景颜色纵向渐变
在来Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
参数说明
1,起点位置自top 是从上到下,left是从左到右,left top是左上到右下
2,开始颜色,
3,结束颜色
在Webkit下
-webkit-linear-gradient(top,#ccc,#000);
参数与mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
数与mozilla一致
更多的参数应用可以去度娘查询,有很详细参数使用示例
Ⅳ 使用div+css实现背景颜色渐变,怎么实现呢
如果只要求抄兼容高级浏览器,CSS3可以解决。
<divclass="box"></div>
.box{width:500px;height:100px;background-image:-moz-linear-gradient(top,#45B5DA,#0382AD);background-image:-webkit-gradient(linear,50%0%,50%100%,from(#45B5DA),to(#0382AD));background-image:-o-linear-gradient(top,#45B5DA,#0382AD);}
如果要兼容低级浏览器,例如IE6,还是用背景图片重复吧。
上面的这属性可以在CSS手册里查到。
Ⅵ PS背景颜色渐变效果
渐变需要2个颜色,比如你想上面湖蓝,下面群青,你就前景色湖蓝,背景色群青,选中渐变-线性渐变,然后从上到下一拉,完事。
Ⅶ PS里面的那些颜色的渐变背景怎么做出来的
工具栏图层-图层样式-颜色渐变,在这里能选择两种以上的渐变颜色,可以调整角度和透明度,你可以自己动手试一下。下图是默认的其中一种渐变模式
Ⅷ 怎么在PS里面把背景颜色渐变
1、打开ps,新建一个500乘500PX的背景。
Ⅸ ps如何设置渐变背景色和填充色
你先选择渐变工具来,调出渐变编源辑器,然后设置你要的渐变,然后在背景图层上面拉渐变即可,或者你双击背景层,添加图层样式,里面有渐变叠加的,填充的话你先设置好前景色或者背景色,然后按alt+del,ctrl+del进行填充,或者用菜单栏里面的 编辑--填充命令
Ⅹ 怎样用css实现网页背景颜色渐变
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变:
3.1、从上到下的线性渐变:
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
3.2、从左到右的线性渐变:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
3.3、线性渐变 - 对角:
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
4.径向渐变:
4.1、颜色结点均匀分布的径向渐变:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
4.2、颜色结点不均匀分布的径向渐变::
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
4.3、形状为圆形的径向渐变:
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}