`
Rainbow702
  • 浏览: 1076721 次
  • 性别: 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

里面讲解的很详细。

 

 

分享到:
评论

相关推荐

    css3实现一个div设置多张背景图片及background-image属性实例演示

    在CSS3中,`background-image`属性极大地扩展了对背景图片处理的能力,使得在一个单一的HTML元素(如div)上设置多个背景图片成为可能。这个特性显著提高了网页设计的灵活性和创意性,减少了以往需要通过嵌套div来...

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

    本篇文章将深入探讨`div`的一些进阶效果,包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先,让我们关注圆角`div`。CSS3引入了`border-radius`属性,使得我们...

    jquery自动缩放渐变全屏背景图片代码下载.zip

    在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...

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

    在CSS中,实现div背景颜色渐变是一种常见的视觉效果,可以使网页元素看起来更加现代和吸引人。本篇文章将详细介绍如何通过CSS代码实现div层背景颜色的渐变。 首先,我们来解析一下给定的代码片段。这段代码创建了一...

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

    标题中的“CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌”指的是在网页设计中,使用CSS来实现一个DIV元素的背景颜色渐变效果,并确保这种效果在不同的浏览器,包括Internet Explorer(IE)、Firefox和Google Chrome...

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

    ### CSS 实现 Div 背景色渐变色详解 #### 一、引言 在网页设计中,渐变色背景是一种非常常见的视觉效果,它能够为网站增添活力与美感。本文将通过一个简单的示例来详细介绍如何使用 CSS 来实现 div 的背景渐变效果...

    DIV框渐变填充实现源代码

    在网页设计中,`div`元素是一个非常基础且重要的部分,它用于定义文档中的分区或区块。`div`框的样式可以通过CSS(层叠样式表)进行定制,包括颜色、大小、位置等属性。本话题将深入探讨如何利用CSS来实现`div`框的...

    div设置宽度背景颜色js代码.zip

    /* 初始背景色 */ margin: 50px auto; /* 居中显示 */ border: 1px solid black; /* 边框,方便观察效果 */ } <div id="myDiv"></div> ()">点击改变样式 function changeStyle() { var divElement =...

    图片渐变效果

    2. 图片渐变:除了背景色,还可以用CSS3渐变效果处理图片。通过设置background-image为渐变,然后叠加原图,可以实现图片的渐变效果。例如: ```css div { background-image: linear-gradient(to right, rgba(255,...

    js图片渐变

    在JavaScript中实现图片渐变效果是一项常见的前端技术任务,它主要涉及到CSS3的渐变特性、HTML元素操作以及可能的canvas技术。以下是对这个主题的详细讲解。 首先,"js图片渐变"通常指的是通过JavaScript控制图片的...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    在这个案例中,我们可能会使用线性渐变作为遮罩的背景色,以实现从透明到半透明的颜色变化。 3. **伪类选择器(Pseudo-classes)**: CSS3的伪类选择器如`:hover`,可以帮助我们在元素获得特定状态(例如,鼠标悬停...

    asp.net 渐变的窗口背景

    标题中提到的"asp.net 渐变的窗口背景"可能是指一个示例项目,通过C#代码生成动态的渐变背景。 C#虽然主要用作服务器端编程语言,但可以通过操作HTML元素和CSS属性来影响客户端呈现。例如,可以使用JavaScript库如...

    好用的div渐变,美化你的网页

    在网页设计中,渐变经常用于背景色、按钮等元素上,能够使页面看起来更加丰富和有层次感。 **应用场景:** - **背景色:** 使用渐变作为背景,可以使页面显得更加生动。 - **按钮样式:** 渐变按钮比纯色按钮更吸引...

    超炫酷的CSS3进度条动画 背景色渐变

    这段代码创建了一个从左到右的线性渐变,从#00b4db(一种蓝色)渐变到#0083b0(另一种较深的蓝色)。颜色可以是任何十六进制、RGB、RGBA、HSL、HSLA格式的值,甚至可以混合使用。 如果想要增加动画效果,我们可以...

    H5 CSS3 渐变的使用

    虽然现代浏览器对CSS3渐变支持良好,但在处理旧版浏览器时,可能需要使用图片作为备选方案。为了确保兼容性,可以使用`-webkit-`、`-moz-`、`-ms-`等前缀。 7. **实际应用**: 渐变不仅限于背景,还可以应用于边框...

    asp.net 渐变的窗口背景源码

    1. **VB源代码文件**:可能是一个或多个.vb文件,这些文件包含了用VB编写的ASP.NET代码,用于生成或控制渐变背景的HTML元素。 2. **CSS样式表**:可能是一个.css文件,其中定义了渐变背景的样式。在CSS中,我们可以...

    15种CSS3渐变颜色色板配色代码

    这段代码会在一个`div`元素上创建一个从左到右,从红色渐变到黄色再到绿色的背景。 为了实现更复杂的效果,你还可以添加更多的颜色停止点、调整渐变的角度或位置,甚至混合渐变类型。同时,CSS3还允许我们通过使用`...

    CSS(无图片)实现页面元素颜色的渐变效果

    线性渐变允许你定义一个方向,颜色从一种逐渐过渡到另一种。基本语法如下: ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` - `direction` 指定渐变的方向,可以是...

    JS弹窗带有背景颜色会渐变效果遮罩住背景

    在JavaScript(JS)中,创建一个带有渐变背景色并能遮罩住页面背景的弹窗效果是一项常见的任务,尤其在网页交互设计中。这种效果能够提供更好的用户体验,因为渐变遮罩可以使用户更加专注于弹出的内容,同时不完全...

Global site tag (gtag.js) - Google Analytics