yxgblog
- 浏览: 37462 次
- 性别:
- 来自: 郑州
-
最近访客 更多访客>>
最新评论
-
ngn9999：
天下文章一大抄
让Flash乖乖躲到Div浮动层下去 -
cqujsjcyj：
先说声谢谢啊，
下了你的东西，但是这个QQ客服怎么点了，不出现 ...
qq客服随滚动条滚动 -
fighter-to：
这是csdn上的，请楼主表明出处。
杨澜告诫女孩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.content { width:600px; height:200px; margin:0 auto;}
.ft h1 { font-family:Tahoma, Geneva, sans-serif; font-size:330%/100%; font-weight:bold; margin:30px 0 50px;; color:#464646; position:relative;}
.ft h1 span { background:url(gradient-white.png) repeat-x; display:block; width:100%; position:absolute; height:31px; }
-->
</style>
</head>
<body>
<div class="content"><div class="ft"><h1><span></span>gradrangc</h1></div></div>
</body>
</html>
使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.content { width:600px; height:200px; margin:0 auto;}
.ft h1 { font-family:Tahoma, Geneva, sans-serif; font-size:330%/100%; font-weight:bold; margin:30px 0 50px;; color:#464646; position:relative;}
.ft h1 span { background:url(gradient-white.png) repeat-x; display:block; width:100%; position:absolute; height:31px; }
-->
</style>
</head>
<body>
<div class="content"><div class="ft"><h1><span></span>gradrangc</h1></div></div>
</body>
</html>
使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
分享到：
发表评论
-
图片无缝左右滚动
2010-11-09 12:38 1073<!DOCTYPE html PUBLIC " ... -
更换颜色点击不同的按钮
2010-03-24 16:48 836<link id="cssChange&quo ... -
更换图片
2010-03-24 16:40 1271<div id=oTransContainer ... -
点击按钮弹出层
2010-03-24 16:26 1766<script>function msg(in ... -
滑动导航二级菜单
2010-03-24 16:03 910//css样式 .blogNav{width:950px;m ... -
不同效果的图片更换
2010-03-24 15:44 1236//页面显示 <div id=imgADPlayer& ... -
单行多条信息滚动
2010-03-24 15:36 865//css样式 #shangfan{font-size: 1 ... -
css 之 ime-mode
2009-12-09 08:48 860css 之 ime-mode 语法： ime-mode : a ... -
IE7和Firefox中背景颜色的解决方法
2009-09-21 11:59 1333昨天制作页面的时候，遇到一问题：div外层定义的背景颜色不显示 ... -
网页设计趋势之:”勾引”用户的按钮
2009-09-07 09:03 714文章来自：http://www.68design.net/We ... -
ie6,ie7高度问题
2009-09-05 18:30 1126I hate IE6! 今天下午遇到一问题：ie6，ie7定 ... -
overflow与text-indent:-9999px 字体隐藏及input value偏移
2009-08-31 15:52 1525文章来自：http://hi.baidu.com/happya ... -
多层边框的css制作-火狐
2009-08-31 15:34 1221Mozilla -moz-outline CSS 有些时候 ... -
CSS3中的text-shadow属性：文字阴影
2009-08-25 15:32 1166经常会看到页面中文字阴影的效果，觉得很漂亮，一般做这样的效果都 ... -
七招帮你提高网页设计水平
2009-08-25 15:09 736文章来自：http://news.csdn.net/a/200 ... -
CSS hack:区分IE6，IE7，firefox
2009-07-02 08:42 725文章转自：http://www.div-css.com/htm ... -
实用代码片段
2009-05-26 11:01 6051.设为首页 收藏本站 <a href=# oncl ... -
qq客服随滚动条滚动
2009-05-20 08:41 890近段时间用到qq客服的内容比较多，在这总结一下。 -
随滚动条滚动的两侧的层
2009-05-05 09:16 1101最近工作中遇到了随滚 ... -
CSS---竖着的文字导航菜单制
2009-04-29 17:13 1767来自走走停停看看的博客 网上目前两种方法竖排，一种是用 ...
相关推荐
这是国外的一个网站制作的效果，我把它转成本地形式，方便大家进行CSS3渐变测试。 主要功能是实现CSS3渐变效果，调好自己想要的颜色后，可以直接复制CSS代码！心动了吧，还不赶块试试！
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
纯css+html实现颜色渐变与条纹效果 纯css+html实现颜色渐变与条纹效果
SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以...此外，渐变效果的元素在放大时看起来效果更好。
脚本简介：纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效，动态加载效果，背景色动态渐变，纯css+js实现，对于简单页面实现进度条效果可以简单利用此方法。 脚本简介：纯js+css3渐变...
CSS渐变滤镜大全.txt(可以实现很多渐变……效果)
CSS3实现颜色渐变菜单,CSS3渐变,渐变效果图,渐变菜单,渐变,CSS3导航菜单,CSS3导航,菜单导航,CSS3实现颜色渐变菜单是一款纯CSS3实现的颜色渐变菜单效果,无需任何js代码,既可以实现按钮的色彩渐变,伴随鼠标的离开菜单...
通过CSS border-radius，我向大家展示了如何实现方形元素的圆角效果，这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术。现在火狐，谷歌浏览器，Safari，IE8+都支持...
CSS3实现图形颜色渐变 CSS3实现图形颜色渐变效果网页特效.zip
一款纯css3渐变进度条加载动画特效，基于css3背景属性绘制的渐变风格百分比进度条动画效果。
效果描述： 在我们的网页里，经常碰到这样的...现在好了，完全可以使用css3的代码来实现渐变，左侧定义一个颜色，右侧也设置一个颜色，并分别设置不同的透明度即可 使用方法： 关键在css样式中：10-13行
纯CSS3实现的日落时渐变色背景动画效果源码.zip
将一个盒子，定位于另一个盒子的显示区域外，并将改该盒子实现透明透明效果，当鼠标划过调用css3动画效果。
本次案例为（背景颜色渐变），运用css3就能实现背景颜色渐变的效果； HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 渐变——天际线</title...
纯css实现兼容各浏览器的颜色线性渐变，对角渐变，渐变角度设置，线性渐变透明度，及渐变方向、隔行变色等，支持设置结点渐变的效果。
而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。 CSS3渐变属性 css3中定义了两种渐变类型：线性渐变和径向渐变。线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果，我们一般在css3中使用...
CSS3实现圆角阴影渐变效果兼容IE，火狐等主流浏览器，用过都说很好用，你懂的。
css3渐变头部导航是一款基于jquery css3实现的固定头部的渐变菜单效果。 css3渐变头部导航演示图： 点击查看演示：