PNG

  • 格式

    格式 位数 透明支持
    png8 8 不支持
    png8+索引透明 8 仅支持完全透明
    png8+alpha透明 8 支持
    png24 24 不支持
    png32 32 支持

    png的格式可以分为以上几种,而我们常用的便是png8与png32了(即是我们常在ps中导出的png24)

  • 透明

  • png32

我们在ps中导出的png24勾上透明选项后,即是这里所说的png32了,而png32实际上是指的png24位的深度,以及8位的alpha透明通道。因为png32颜色的丰富性(2^24种颜色),以及对各种透明的友好支持。png32是我们许多人最常用的格式之一。其导出方法也很简单,只用在ps中选择导出为web所用格式,选中png24+透明即可。然而png32在ie6上并不能表现为透明

  • png24

其实png24本身是不透明的,因为其并没有那8位的alpha通道。在fireworks中我们可以很好地看到这一特点图片 1

图中下面为png32,上面为png24

  • png8png8由于仅有2^8种颜色,因此体积较小,同时,他还对透明有比较友好的支持,因此,png8也是很多人喜欢使用的图片格式。
    • png8+alpha透明png8的alpha透明,由于不能够使用ps来进行导出,因此我们需要使用fireworks来导出。这次,我选择了一张黑色的透明背景来对透明的支持做一次比对

图片 2

图中下为png32,上为png8+alpha透明

可以看出,png8对于半透明,有不错的支持性。同时,因为其比较小的体积。在现代浏览器上,对于颜色不太复杂的小按钮之类的的东西,以及对于图片的要求并没有那么高的移动端端来说png+alpha透明也是显得十分友好的。当然,对于颜色较为复杂,以及要求较为严格的pc端上需要采用的东西,我认为还是应该采用png32的好。不过alpha透明的png8在ie6上的表现并不如人意,在ie6上,其半透明处会以全透明来显示,并且毛边严重。之前也提及到了,png8的alpha透明对于半透明,只是有不错的支持性,其真正的表现事实上还是不如png32。在我测试过程中发现,png8采用alpha透明,依然会出现一些毛边图片 3

比对可以发现,上面png8+alpha透明的图片比起下面png32的图片还是多了一些锯齿。不过整体影响不算太大。

  • png8+索引透明

png8的索引透明终于可以用ps来进行导出了,导出方式也很简单。导出的时候直接选择ps的png8或者ps预设的png-8
128仿色。此时我们就可以导出索引透明的png8了。如下图图片 4

从上面的图可以看到,我们将导出图片,四周部分变为了白色(当然,你一打开看到的也可能是没有白边的)。这个时候,把图片右边那个杂边改为无,就可以去掉图片的白边。如下

图片 5

左边的png32的图与右边png8的图对比可以看出,右边的图明显有一些锯齿。原因是索引透明对于透明的支持并不完善,其仅仅支持全透明以及全不透明,而不支持半透明。当选择了杂边为无的时候,所有的半透明转换为了不透明,也就产生了锯齿。那如何解决这些锯齿呢?

刚刚将四周白色,变为无的杂边的选项,其实就是ps对于锯齿的一个解决方法。如果这张图的需求是在纯色的背景下的话,我们可以将杂边,改为该图在网页中所在的背景的颜色,以做到在视觉上的一种无锯齿的感觉。这种方案在ie6下也可以很好地实现,不过也有他的局限性——倘若背景颜色比较复杂,那么这种方案将会无效。

一、先看效果

您可以狠狠地点击这里:基于clip-path的元素碎片飞入动效demo

图片 6

结论

在这篇教程里,我们看了 5 种不同的通过 CSS
隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性,随着时间推移,你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题,请在评论中留言。

1 赞 5 收藏
评论

图片 7

图片的选择

那么就总体来说下图片格式的选择应用场景吧(虽然上面多少都有些提到了)

  • 关于jpg由于其可压缩的特点,对于背景颜色较为复杂(比如照片等图)并且没有透明的图片,建议采用jpg。这样在保证了图片肉眼几乎看不出很大区别的情况下,把图片压得更小,压缩更快。不过对于有线条及文字的内容,不推荐用jpg。
  • 关于gif如果需要动图的话,由于APNG对兼容性对不友好gif依然还是首选。
  • 关于png
    • png8+alpha可以加入日常的开发中。对于桌面端,在不用考虑ie6的情况下,alpha透明的png8可以用在一些图片颜色较为简单的地方。对于移动端,可以考虑直接采用alpha透明的png8,而不采用png32,因为移动端的网络相较pc端较差,因此,采用png8+alpha可以节省流量。
    • png32在桌面端中,还是可以作为主要的图片格式。因为桌面端相较于移动端,网速更友好,同时,显示器的浏览对于图片的精细程度要求更高,因此,一些比较复杂的按钮,logo还是应当采用png32来处理
    • png8+索引透明可以用来处理桌面端对于低版本浏览器的(ie6)的兼容问题,虽然采用背景杂边的方式只能解决部分锯齿问题,但总好过于无。ie6已然是很早之前的浏览器,本身对其的兼容就势必会牺牲一些东西。因此,个人感觉还是对于背景简单的,直接采用杂边的方式来解决,而对于背景较为复杂的,目前我也只能想到采用去掉杂边的方法去解决(其实也就是说锯齿直接不管了)。

四、结束语

我写的第一版JS中的碎片分布是为随机分布,基本上根据自身方位随机分布在4个角的方向上;这里给大家展示的是真随机,也就是最左边的碎片可能是从最右侧飞过来的,所以效果要更爆裂一点。

好了,其他就没什么了,一个小特效而已。

其实说穿了,并没有多大的难度,一点JS+一点CSS。关键是想到好的解决思路。如何才能有好的解决思路呢,需要对前端是真爱,这样你会一直把前端放在脑中,自然而然就会是不是迸出很多很好的思路,创意和解决方案了!否则,永远都只能拾人牙慧。

1 赞 2 收藏
评论

图片 7

用 CSS 隐藏页面元素的 5 种方法

2016/06/12 · CSS ·
隐藏元素

原文出处: Baljeet
Rathi   译文出处:十年踪迹(@十年踪迹)   

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将
visibility 设为 hidden、将 display 设为 none 或者将 position
设为 absolute 然后将位置设到不可见区域。

你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点,让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。

结束时的话

……恩,对于图片的总结应该是还没有结束的。这里就只能写到这么多了。还有关于体积更小,效果更好的WebP,以及对于这种图片方案与前端自动化工具的结合还没有纳入实践……嗯,搞不好哪天懒癌治好了就继续写了。

1 赞 收藏
评论

图片 7

三、我也想使用

我花了点功夫封装了一个方法,1K出头一点,代码如下(大家可以直接放到项目JS中或独立个JS文件):

/** * @description 任意元素碎片化,配合CSS可以有碎片拼接特效
更多内容参见 * @author
zhangxinxu(.com) * @license MIT [保留此段注释信息署名] */ var
clipPath=function(t){if(!t){return false}t.removeAttribute(“id”);var
r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var
a=r.distance,n=r.width,e=r.height;var o=””;for(var i=0;i’,'”
style=”‘+e+v+'”>’)})}}t.parentNode.innerHTML=r.html+o;return
true}else{t.className+=” no-clipath”;return false}};

1
2
3
4
5
6
7
/**
* @description 任意元素碎片化,配合CSS可以有碎片拼接特效
               更多内容参见 http://www.zhangxinxu.com/wordpress/?p=5426
* @author zhangxinxu(.com)
* @license MIT [保留此段注释信息署名]
*/
var clipPath=function(t){if(!t){return false}t.removeAttribute("id");var r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var a=r.distance,n=r.width,e=r.height;var o="";for(var i=0;i’,’" style="’+e+v+’">’)})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};

语法如下:

clipPath(ele);

1
clipPath(ele);

其中,ele为DOM元素,clipPath方法基于原生JS书写,不依赖其他JS框架,对于不支持clip-path的浏览器没有效果。返回值是布尔值truefalse,
返回true表示浏览器支持clip-pathfalse为不支持。

代码中的distance:60表示碎片的大小,越小碎片越多,对性能的考验就越大。

例如,demo中文字和图片的使用:

var eleText = document.getElementById(‘text’), eleImage =
document.getElementById(‘image’); // 碎片特效初始化 clipPath(eleText);
clipPath(eleImage);

1
2
3
4
5
6
var eleText = document.getElementById(‘text’),
    eleImage = document.getElementById(‘image’);
    
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);

需要注意的是:

  1. 应用动效的务必是absolute绝对定位元素。一来效果必须,二来性能考量;
  2. 应用动效的元素不要太复杂,可能对性能会有考验;
  3. 原始被用来粉碎的元素一直都在的,这样,碎片拼接处的间隙就看不出来啦!

Display

display 属性依照词义真正隐藏元素。将 display 属性设为 none
确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦
display 设为 none
任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。

不过请注意,通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM
来操作它,就像操作其他的元素。

CSS

.hide { display: none; }

1
2
3
.hide {
   display: none;
}

看下面的例子:

@SitePoint 提供的例子“用 display
隐藏元素”

你将看到第二个块元素内有一个 <p>
元素,它自己的 display
属性被设置成 block,但是它依然不可见。这是
visibility:hidden
display:none
的另一个不同之处。在前一个例子里,将任何子孙元素
visibility 显式设置成
visible
可以让它变得可见,但是 display 不吃这一套,不管自身的
display
值是什么,只要祖先元素的 displaynone,它们就都不可见。

现在,将鼠标移到第一个块元素上面几次,然后点击它。这个操作将让第二个块元素显现出来,它其中的数字将是一个大于
0 的数。这是因为,元素即使被这样设置成对用户隐藏,还是可以通过
JavaScript 来进行操作。

发表评论

电子邮件地址不会被公开。 必填项已用*标注