介绍一下Gilder/Levin 的方法
<h2>
<span></span>Hello World
</h2>
<style type="text/css">
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位,撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。
分享到:
相关推荐
这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件,在页面的两侧,有两...其焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,此处效果演示将文字替换成图片,效果更显炫酷。
项目代码量:共计20个index.html文件,15个页面,一定数量的照片素材(可自行替换) 项目效果:实现了背景图片文字特效反转,页面点击的渐变反馈互动,导航栏目包括(首页,帖子,工具,关于,欢迎)5个栏目,每个...
利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。 二、介绍CSS3的 text-shadow属性...
使用jquery.fireworks,实现烟花、爱心照片墙、爱心跳动、随机照片墙,可以自定义文字描述,适用于2.14,520,521情人节表白,最好有一定的html基础,图片需要替换成你自己的,文字描述也替换成你自己的,js,css,...
1.源码使用技术 HTML、CSS、JavaScript,该效果实现了3D旋转相册效果、流星雨动态背景以及背景音乐的播放与暂停 2.3D旋转相册中的背景音乐、照片、文字均可自定义修改,具体修改说明如下 修改照片:打开index.html ...
图片素材插入、替换、裁剪,图片容器等功能。 SVG 素材颜色、透明度编辑,文字花字组合。 画布自定义尺寸、滚轮缩放、自适应画布 吸附对齐、辅助引导线、标尺功能。 键盘快捷键、右键菜单快捷操作,复制删除等...
鼠标经过的时候替换背景和文案 (1)准备一张图片 图片地址:https://www.csgo.com.cn/data/images/e1.jpg (2)代码部分 HTML 军衔等级 CSS a:link, a:visited, a:hover, a:active { cursor: pointer; ...
8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...
8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
1.网页作品简介 :基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 七夕告白, 求婚, 浪漫爱情 ,炫酷代码 ,已经兼容手机端和电脑端, 制作修改简单, 需替换图片和文字即可,可自行更换背景音乐。 2.网页作品编辑:...
此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时...
14.3.2 使用JwaScript和CSS实现页面多种风格的实时替换 14.4 总结 第15章 数据存储的脚本化 15.1 什么是cookie 15.1.1 浏览器和客户端cookie 15.1.2 cookie的属性 15.2 cookie的客户端存取...
立方体翻转3D全屏焦点图特效是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效...其焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,此处效果演示将文字替换成图片,效果更显炫酷。
16.独创全站图片即时替换功能,方便地替换网站中任何位置的图片(包括背景图片),再也不用找不到图片路径而发愁了。 17.采用AJAX技术,性能与效果得到极大提高。 18.前台内容栏目结构清晰,易于访问者查看想要的...
使用jQuery扩展工具函数实现对字符串指定类型的检测 第10章 在指定的查找范围内获取DOM元素 选择器中含有空格符与不含空格符的区别 事件中的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data...
16.独创全站图片即时替换功能,方便地替换网站中任何位置的图片(包括背景图片),再也不用找不到图片路径而发愁了。 17.采用AJAX技术,性能与效果得到极大提高。 18.前台内容栏目结构清晰,易于访问者查看想要的...
14.1.1 计算机文字字符编码简介 14.1.2 使用html文档字符集和选择字符编码 14.1.3 指定字符编码 14.1.4 字符编码的优先级 14.1.5 在html文档中使用字符引用 14.2 指定文档内容的语言(lang属性) 14.2.1 语言代码 ...