说说网页制作中的图片处理技巧

  做网站这个行业应该知道,网站优化的重要性对一个网站,他们那一部分取决于操作和维护人员,而另一部分则取决于程序和生产人员。因此,作为前端,在重构设计时应该如何处理图像?今天,通过seo优化,您将分享Web生产中的背景图片处理技术。

  第一:在保持图片质量的情况下,尽可能减小图片的大小

  当前端拿到设计稿在进行切图的时候,在存储为web所用格式的时候,可以调整图片的质量来缩小图片

  第二:减少服务器请求次数,图片能少就少,能不用就不用

  在处理图标的时候,把所有可设置成背景图的小图标放置在一张图片上,设置成背景图片,然后在background里调定位即可

  例:现在有一个Search的按钮需要放置图标,便可使用如下方法

  如上图,放大镜的位置是距顶部20px,距左95px

  那我们就可以给Search的button设置背景图片为:

  Background:url(/image/icon.png) 95px 20px no-repeat;

  注意,小萌新不要忘记给button去默认样式,加上尺寸

  还有一种就是设计稿中经常会出现带有底线的标题

  

 

  对于处理这种东西的时候,好多萌新都采用做背景图片的方式来处理这种问题,这就无形中又多了一张图片。其实根本没有必要再去切一张图片,多麻烦啊,有一个叫border-bottom 的东西,完全可以把这个样式玩出来

  首先,外层要给一个div,类名为title(个人习惯),视情况而定给a标签或者是span标签也就是Css如下:

  .title{ width:100%; height:24px; border-bottom:1px solid #999999;}

  .title a{display:block; padding:12px 10px; background:#fff; font-size:24px; line-height:24px; margin:0 auto;}

  div给了宽度和高度分别是100%,高度为24像素,底边1像素实线,颜色为#999;

  文字的标签变为实体,内边距为上下12像素,左右10像素,背景颜色为白色(与设计稿的背景颜色相同)字体大小为24像素,行高24像素,居中。

  现在可以看一下这些数据:div的高是24像素,a标签的高加在一起是48像素,div的高小于a标签的高,也就是a标签溢出了,但是你只要不给div over-flow:hidden的属性,就可以实现上图效果,也就是说减少了图片的使用数量,减少浏览器请求次数。

  网站重构的过程中是十分灵活的,每一个标签,每一个元素都在你的掌握之中,灵活运用,才回做出更好的效果

您可能还会对下面的文章感兴趣: