CSS3图片倒影技术实现及原理
CSS3图片倒影技术实现及原理
目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect
属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect
的作用是让图片出现倒影。
实现倒影的基本语法
实现倒影的基本语法非常的直观,假设我们想给下面的图片增加倒影效果,可以这样写:
img {
-webkit-box-reflect: below;
}
上面这个例子中倒影出现了图片的下方,但实际上我们也可以将倒影安置在左侧、右侧或上侧。
倒影偏移量
Offset属性值用来定义图片和倒影影像之间的间距。参考下面的代码:
img {
-webkit-box-reflect: below 10px;
}
上面的代码中,我们使图片和倒影影像之间相聚10px
;
给倒影增加消隐效果
在现实生活中,倒影的出现通常是上半部比较清晰,下面半部逐渐消隐。为了在CSS中实现这种效果,我们需要运用CSS3渐变色(Gradients)功能,就像下面这样:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
这段代码就能达到这样的效果:
我们还可以使用color-stop
来控制色彩过渡,让倒影更加漂亮:
img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
火狐浏览器中倒影的实现
目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现box-reflect
属性。为了在火狐浏览器中也实现倒影功能,我们需要寻找另外的途径:使用-moz-element()
方法。这个方法能够复制指定网页元素的内容。让我们来看看下面的例子:
我们把图片包裹着一个ID是someid
的<div>
里。
并且,为了存放倒影影像,我们将使用:before
伪元素,就像下面:
#someid {
position: relative;
/* 给倒影留下空间 */
margin-bottom: 120px;
} #someid:before {
content:""; /* needed or nothing will be shown */ background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,
-moz-element(#someid) 0px -127px no-repeat; -moz-transform: scaleY(-1); /* flip the image vertically */
position:relative;
height:140px;
width: 360px; /* 需要 > image width + margin + shadow */
top: 247px;
left:0px;
}
这里的-moz-transform
是一个负值,作用就是让复制过来的图形上下颠倒,达到倒影的效果。为了让:before
伪元素跟原始图形相配合,我们需要移动它的位置。这里的背景偏移量 (-127px)是:before
伪元素高(140px) – (图片的高 (247px) + div的border (20px))。需要注意的是,火狐浏览器版的倒影实现只能用在页面的背景是真实背景。背景色要和:before
伪元素使用的渐变色的颜色一致。
因为所有的属性都是来实现倒影的,而且这些属性都有火狐浏览器独有的前缀,和Webkit的倒影不冲突,所以在代码在可以把两个版本倒影方法都写上,保证两种浏览器里都有效果。
视频倒影
官方文档中说当倒影的实体内容变化时,倒影的内容也会相应更新。因此,这种技术用在视频是有特殊的效果。
CSS倒影技术在火狐浏览器中的小问题
有时,火狐浏览器生成的渐变色图形会比背景元素稍微小一些,导致有一些间隙线出现。为了避免这种情况出现,在:before
伪元素的顶部和底部加1px
的padding,并且分别设置背景的裁剪方式和原点:
padding: 1px 0px;
background-origin: border-box, content-box;
background-clip: border-box, content-box;
原文来自:webhek
CSS3图片倒影技术实现及原理的更多相关文章
- CSS3图片倒影技术
http://bbs.itheima.com/thread-330315-1-1.html?wymlxt
- WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现
原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- 7:CSS Sprites的原理(图片整合技术)
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- Nginx/Apache图片缩略图技术
1,目的 2,使用方式 3,Nginx + Linux 缩略图实现 3.1,原理 3.2,nginx配置实现 3.3,例子 4,Apache + Windows缩略图实现 4.1,环境 4.2,原理 ...
- WPF实现图片倒影
比较简单,主要用到ScaleTransfrom类和VisualBrush类 <Window x:Class="实现图片倒影的方式.MainWindow" xmlns=&quo ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
随机推荐
- Java图形化用户界面(GUI)笔记(一)介绍
一.布局 1.组件 以图形化的方式显示在屏幕上的,和用户进行交互的对象,就叫做组件. 组件包括:菜单.标签.文本框(密码框).滚动条.单选.复选.按钮等等. 2.容器 组件不能独立的显示出来,只能将组 ...
- <基督教福音视频>
<信耶稣还是罪人吗?>全集 http://www.youku.com/playlist_show/id_18458615.html <因信称义>全集 http://www.yo ...
- SQL Server2014,附加数据库失败,错误为:5120的解决方法
在SQL Server 2014附加数据库的时候,报错为: 无法打开物理文件XXX,操作系统错误5(拒绝访问),SQL Server 错误5120 解决方法: 我的电脑→管理→服务和应用程序→ 服务 ...
- YTU 3026: 中序线索化二叉树
原文链接:https://www.dreamwings.cn/ytu3026/2896.html 3026: 中序线索化二叉树 时间限制: 1 Sec 内存限制: 128 MB 提交: 9 解决: ...
- Python 学习随笔1
在一个列表中,找出重复数组的位置. 比如在列表name = [1, 5, 8, 22, 56, 2, 8, 45, 7, 2, 35, 2, 486, 2, 152, 111, 265, 2, 2]中 ...
- Git使用指南(2)——工作区,暂存区,版本库
1 工作区修改添加到暂存区 git add 2 暂存区提交到版本库 git commit 3 版本库更新到暂存区 git reset HEAD 4 删除暂存区文件 git rm --cached< ...
- 深入了解try catch
@Test public void testWeiXin(){ System.out.println(task()); } private boolean task(){ try { int i = ...
- python之socket
一.初识socket socket 是网络连接端点,每个socket都被绑定到一个特定的IP地址和端口.IP地址是一个由4个数组成的序列,这4个数均是范围 0~255中的值(例如, ...
- Canvas的API整理
canvas元素 可被用来通过脚本(通常是JavaScript)绘制图形.比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果.你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内 ...
- 特殊符号 && 和 ||
一.值为false的情况 如果逻辑对象值为0,-0, null,undefined,false,"",NaN.那么值为false. 二.&& || 的 理解 1.& ...