Eighteen Blog

背景

发现这个问题是在图片上定位了一个删除按钮,当我用opacity属性对图片进行透明化处理的时候,发现删除按钮不管用了,最后发现删除按钮是被图片覆盖了,究其原因是因为opacity这个属性造成的层级变化。

  1. 我发现含有opacity属性的元素层级会比其他元素的层级高,这时候z-index是不起作用的,opacity会一直高于其他元素的层级。
  2. 给其他元素加上position属性,会使该元素跟opacity处在同一层级之上,这时候你再给元素附加z-index就可以起作用了。
Css

前两篇文介绍了css3的过滤器filter用来实现图片的高斯模糊效果,还有js拖拽的功能。
要实现局部模糊就要把两者结合起来,计算位移就可以了。

实现原理

原理其实很简单,就是两张图的叠加。底部一张清晰的图,上面一个高斯模糊过的图,将高斯模糊的图当作上层元素的背景,利用背景定位使其只显示一部分,然后把这个高斯模糊的窗口放置在高清图的上层,背景图片的位置与下面的图片位置一致,这样看起来就像一张高清的图片打上了马赛克一样。讲起来不是很清楚,大家可以看一下代码。

Css

文字居中

垂直居中(vertical-align)

我们都知道有这么一个属性可以让图片,文本等在元素中垂直居中

1
vertical-align:middle;

vertical-align值有很多,常用的就是middle,bottom,text-bottom等,我们先说middle。

vertical-align时而没效果

然而真实使用的时候,我们会发现这个属性“时灵时不灵”,有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。同时这两种还有所不同。

Css