文章关键字 ‘背景图片’

巧用CSS cross-fade()实现背景图像半透明效果

2020年07月6日,星期一

cross-fade背景图透明度降低

虽然CSS新特性非常多,但所有这些新特性,没有任何特性可以实现元素的背景图像半透明,但是元素中的文字内容依然不透明的效果,除了一个例外,那就是cross-fade()图像函数。

阅读全文…

学习了,CSS中内联SVG图片有比Base64更好的形式

2018年08月19日,星期日

CSS内联SVG文章头图

难免的,我们需要在CSS中内联SVG图形,以前我都是把SVG文件转换成Base64格式然后内嵌,最近发现,这并不是最好的方法,最好的方法是使用部分转义的SVG原始代码,兼容IE9+,而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么?有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具,相信你会喜欢的。

阅读全文…

CSS3背景图片透明叠加属性cross-fade简介

2012年09月29日,星期六

据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。
毕竟有IE滤镜这厮,所以前者看上去可能不那么显生;那后者Cross-fade是?

阅读全文…

小tip: base64:URL背景图片与web页面性能优化

2012年04月13日,星期五

正如标题所示,本文内容就是介绍如何使用base64编码的CSS背景图片对web页面做性能优化。先介绍何为base64编码,如何base64编码,以及为何需要base64编码,最后付诸实际进行演示。
一如既往,有详尽的源代码展示,必要的截图以及demo演示页面。总之,希望本文的内容能够对你的学习有所帮助。

阅读全文…

你到了第几层?图片式标题、按钮与隐藏文本

2012年03月9日,星期五

本文标题有故弄玄虚之嫌,说是“图片式标题、按钮与隐藏文本”,其实本意重点是介绍z-index负值以及在文本隐藏中的实际应用。外甥点灯笼——照旧,demo多多,截图多多(还有gif动画演示图哦),源代码展示等等,都有。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS页面重构“鑫三无准则”之“无图片”准则

2011年05月25日,星期三

无图片准则 张鑫旭-鑫空间-鑫生活
“鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过。这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”、“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性。

此准则是针对我个人的,可能没有什么适用性,也可能会对您的学习有所启发,所以这里还是简单分享下。其中“无宽度”准则则在去年秋天专门讲了下,这里再简单介绍下其中的“无图片”准则。

本文虽然文字不多,但是多涉及到的技术点不少。有demo,有截图,有源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

Apple iphone4官网图片“视网膜”放大效果实现

2010年08月25日,星期三


本文的内容就是展示苹果(Apple) iphone 官网上帅气的图片放大显示效果,同时并对其实现进行一番简单的讲解。内容主要涉及CSS3以及一些交互效果的实现,一如既往,巨丰富的页面截图,必要的代码展示,还是就是效果精湛的demo页面,但是,由于自身的懒惰,本文不提供打包的源文件下载。
本文的内容还是有一定的实际意义的,在实际的项目中是可以试试这种交互体验上佳的效果的。就技术而言,里面关于CSS3的一些内容,以及图片放大显示的实现,都有一定的学习价值的。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

使用CSS实现Photoshop选区效果及应用

2010年06月24日,星期四

使用CSS实现Photoshop选区效果及应用 张鑫旭-鑫空间-鑫生活

本文主要内容是展示于讲解一种不错UI效果的实现,这个UI效果就是photoshop的选区效果。提供截图展示,提供原理动画演示,相信您会很快了解这类效果的实现方法的。另外,文章的后半部分列举了此效果的一些应用,希望能对开通您的思维提供帮助,利用这种UI效果实现更多精湛的web设计。

阅读全文…

翻译 – CSS Sprites:实用技术还是生厌之物?

2010年03月30日,星期二


这是一篇翻译的文章,翻译的原因在于,我与原作者有类似的观点,即我自己也觉得CSS sprites的使用到了重新审视的时候。不过老实讲,本文作者在观点的表达以及论证上多少有些牵强,但是实际上,CSS sprites确实是需要善用的。难得的,本文没有demo,没有源文件。只是希望能够对您有一些新的启示。

阅读全文…

搜狐白社会似iphone短信对话框效果的优化

2009年09月10日,星期四

搜狐有个白社会,今年六七月份露出水面的。其首页css我是从头到尾看了一遍,学了些东西,也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框,有些形似iphone里面的可爱的短信对话框。

这个对话框效果是不错的,能支持高度上限500像素的文字内容,宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后,发现要实现这样的效果,这代码,至少是这图片肯定是优化不够的。而本文将对比其原来的方法,提供更加大小优化的图片和对应的没有兼容性问题的css代码,看如何将css发挥到机制实现图片背景的优化。

文章主体将简要展示对原图片做如何的处理,展示在各个浏览器下的兼容性表现,以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助!

阅读全文…