css修饰页面怎么制作,【转载】CSS修饰图片
有人翻译了《css decorative gallery》这篇文章,这写也是我们前端开发的时候经常用到的一些技巧。感谢翻译者,感谢webdesignerwall
这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧,方法很简单,只需要用一个 span 标签并对它应用背景图,即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示,从简单的装饰一个小图片到应用圆角的边框,再到半透明的蒙版……不废话来,先来看演示:
?
?
作者给出了这样做的几点理由:
省时方便:不用再用 PhotoShop 去对每张图片进行处理
完好地保留了原始图片:因为是用 CSS 对图片进行样式处理,所以不用对图片进行任何修改,保留了最原始的完整的图片。
非常的灵活:你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
应用广泛:可以在任何地方,对任意尺寸的图片进行装饰。
兼容性强:在大部分浏览器上测试通过,包括 (Firefox, Safari, Opera, 甚至是 IE6 )。
?
?
基本思路:
?
思路挺简单的,就是通过在 DIV 中插入一个额外的 SPAN ,然后通过对插入的 SPAN 设置背景图片来实现图片覆盖的效果。如果你不想在 HTML 中插入额外的、没有语义的标签的话,你可以用 javascript 来解决。下面会介绍到!下面的图很好地解释了它工作的原理:
上面代码中关键的是为div 元素设置 position:relative,而为相应的 span 元素设置 position:absolute,然后你就可以将 span 通过 CSS 的 top 和 left 而放置到任意的地方。
?
?
针对 IE6 的 PNG Hack
?
示例中用到了很多 PNG 的背景图片来实现覆盖透明的效果,而 IE6 不支持 PNG 透明,所以要用 Hack 让 IE6 支持 PNG 透明,网上这样的方法有很多,这里作者推荐了一种:
标签中即可。
? .photo span { behavior: url(iepngfix.htc); }
?
?
jQuery 实现方法
?
如果你不想插入空的、无语意的 span 标签的话,你可以用 jQuery 来向页面中动态地插入标签,也非常的方便。而且不用对原页面进行任何修改。
下面是代码示例:
$(document).ready(function(){
? //prepend span tag
? $(“.photoa“).prepend(“”);
});
引入 jQuery 框架后,利用 .prepend 方法向 .photo a 的元素前插入 span !
?
?
下面让我们来看下作者为我们做好的 15 个精美的示例:
?
#1. Simple Gallery (see demo)
#1b. Mini Icons (see demo)
#2. Photo With Text (see demo)
还可以添加对应的文字。
#2b. Popup Text (see demo)
#3. Mini Paper Clip (see demo)
#4. Cork Board Gallery (see demo, IE6 version)
sIFR Version (Flash Text Replacement) (see sIFR demo)
这个例子中的 span 标签是用 jQuery 添加的!
#4b. Cork Board With Masking Tape (see demo, IE6 version)
#5. Art Gallery – Black Frame (see demo)
#5b. Art Gallery – Gold Frame (see demo)
#6. Grungy Watercolor (see demo)
sIFR Version (see sIFR demo)
#7. Glossy Style (see demo)
#8. Wood Panel Gallery (see demo)
怎么样,很帅吧!!本来想用这个技巧实现区别 wordpress 评论的作者评论的,但一直没想好样式!!希望大家也能用得到哈…
css修饰页面怎么制作,【转载】CSS修饰图片相关推荐
- Div+CSS布局入门教程(三) 页面顶部制作之一
当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了. 在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式 ...
- 大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
- 关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课 ...
- HTML静态页面总体设计思路,网页设计与制作(HTML+CSS+JavaScript)(张洪斌 刘万辉)课程整体设计...
内容简介: 网页设计与制作(HTML+CSS+JavaScript)(张洪斌 刘万辉)课程整体设计 一.课程设计思路 本课程依据课程标准,以软件技术专业学生的就业岗位群能力目标为导向,以Web客户端静 ...
- python制作网页样式与布局_Python开发【第十二篇】:CSS装饰页面
CSS称为层叠样式表,是Cascading Style Sheets的缩写.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS引入方式: 行内式:对标签元素添加 ...
- HTML css——哔哩哔哩注册页面简易制作
学完表单之后的一次小练习~ 明天解封回家啦! 效果图 1. reg.css .clearfix::after{content: "";display: block;clear: b ...
- 10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计 打开blog文件夹的urls.py文 ...
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例 图3-1 网站div结构布局示意图 3.2界 ...
- [转载]CSS 创作指南(Beta)(css规范)
当年还在纠结各种规范的时候,不知道从哪里翻到这个,就让我脱离了css这个规范的苦海了... 反正就是团队和项目合作说的算,选择合适的进行使用就可以了,见到合适的文章,我也会转载过来的 来源 https ...
最新文章
- C++智能指针: shared_ptr 实现详解
- excel表格制作计算机一级,计算机一级OFFICE辅导:给Excel表格添加背景音乐
- oss 视频 转码_播放oss问题的搜索结果-阿里云开发者社区
- Hi3516A开发--安装交叉编译器
- 最佳实践丨三种典型场景下的云上虚拟IDC(私有池)选购指南
- 好文推荐 | 缓存与数据库一致性问题深度剖析 (修订)
- mysql 定时脚本_MySQL定时执行脚本(计划任务)命令实例
- linux虚拟主机泛解析,Apache虚拟主机的配置和泛域名解析实现代码
- [opencv] 图像线性混合
- matlab误码率分析,误码率分析 请大神帮忙解释下程序
- Java线程池 - 问题驱动学习
- Windows 下安装 Redis 1
- java初学者笔记总结day7
- SQL SERVER 2005 数据挖掘与商业智能完全解决方案---学习笔记(一)
- 《通信技术导论(原书第5版)》——2.5 内部使用的IP专用交换系统
- jquery ajax select 二级联动
- cs224n课后作业
- 基于vue的html编辑器,基于vue富文本编辑器的慢慢人生路
- 二维码美化策略——QArt Codes
- 电子信息类包含计算机科学与技术么,电子信息类和计算机类有什么区别