`
Rainbow702
  • 浏览: 1062994 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

一个DIV,如何设置多个背景色(可能是图片,可能是渐变,可能是图片与渐变的混合)

    博客分类:
  • web
阅读更多

最近在做一个页面,有这么一个需求:页面中有一个 按钮,要求这个按钮既有一张背景图,同时它的背景又要有渐变的效果。

换作以前,肯定想都不想,直接用两个DIV去实现:一个用来实现渐变,另一个用来指定背景,再通过float或者定位来实现想要的效果。

但是这次,我就在想能不能只用一个DIV就可以实现了。百度了一下,在知乎上发现了这个帖子:

http://www.zhihu.com/question/19996541

他的需求跟我是一样的,也有人给出了解答:

 

background: url(arrow.png) no-repeat 95% 50%, -webkit-linear-gradient(#fff, #eee 50%,#ddd); 

试了一下,的确可行。

另外,大家也可以参考以下的博文:

http://guangqiang.iteye.com/blog/1895232

里面讲解的很详细。

 

 

分享到:
评论

相关推荐

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等)

    css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等

    css教程实现div背景色渐变色代码分享

    一个简单div+css背景渐变色代码,大家参考使用吧

    div背景颜色怎样渐变 css实现div层背景颜色渐变代码

    CSS控制DIV层背景颜色渐变是一个相当不错的效果,看起来很夺目的,本文也尝试着实现一个类似这样的效果,感兴趣的朋友可不要错过了啊,或许本文所提供的对你学习css有所帮,好了话不多说切入正题

    CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌

    DIV背景色渐变在以前的文章中也有介绍过,但并没有同时兼容IE、火狐、谷歌,而本文的这个示例却可以同时兼容,建议喜欢的朋友参考下

    可以控制多种样式的渐变弹出层

    调用方式 onclick="ChuangJianDIV('要弹出的组建ID','弹出DIV的宽','弹出DIV的高','遮蔽div的透明度','弹出div的速度','遮蔽div的背景色','弹出div的背景色');" 如:onclick="ChuangJianDIV('divID','500','300','...

    使用CSS3的背景渐变Text Gradient 创建文字颜色渐变

    使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量

    100多个JQuery效果示例(实例)div+css+javascrpit

    7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片...

    div+css背景渐变色代码示例

    这个示例代码就是上面是红色,下面是黑色,渐变色的。 复制代码代码如下: <style type=”text/css”> #round { height: 200px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, ...

    JavaScript 图片切割效果

    容器:除了容器本身的作用,通过设置其背景色来设置透明的渐变色,由于图片本身没有背景色所以要通过容器来设置; 底图层:在容器最底部,作用是显示非选择区域的图片,透明效果就是在这层设置; 切割层:最关键的一...

    利用div+css3实现一个背景渐变的button按钮的示例代码

    本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下: 1.background: linear-gradient 背景为渐变色属性 2.利用css3中动画特性animation,实现背景从左至右变化(color_move) 3.为了实现渐变效果,将...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 jquery仿flash的图片幻灯片播放特效实例完整版 jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9.jquery仿flash的图片幻灯片播放特效实例完整版 10.jquery仿LightBox图片盒子单击逐渐放大的图片...

    CSS3点击按钮实现背景渐变动画效果

    效果图如下: 实例代码如下: 复制代码代码如下:<...css3给按钮添加背景渐变动画</title><!–@author:SM @email:sm0210@qq.com@desc: css3给按钮添加背景渐变动画–><style type=”t

    div+css技术收集

    javascript+css一张背景图片的不同切换,DIV背景图片变暗,CSS渐变色,设置div的透明背景,10个非常有用的CSS技巧,图片凸起效果,点击div背景图切换,动态背景

    JavaScript_JQuery_CSS_DIV漂亮的实例

    7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片...

Global site tag (gtag.js) - Google Analytics