偶这里以今日头条的PC版网页为例,采用google的chrome浏览器分析网页的html代码,深入解析彩色图片显示为灰色图的原理。
第一步,用笔记本电脑打开chrome浏览器,在地址栏中输入今日头条的网址 如下图,整个网页成了灰色。
第二步,打开chrome的开发者工具;
按“F12″键, 或者依次点击“更多工具”->“开发者工具”。
第三步,利用开发者工具中的元素选择按键选择网页上的元素进行分析,
如下图,点击选择下图所指的图标,并将鼠标移动到左边网页区域,再鼠标点击网页任何位置。
在HTML源码显示的区域,将滚动条拉至最上方,找到下面这一条html语句:
<html>
正是这一条语句,将整个html的css样式滤镜设置为灰色.
点击鼠标右键,点击”Edit as HTML”,再通过删除style=”filter: grayscale(100%);”将该滤镜删除.
网页又恢复了彩色.
至于怎么样将css样式渲染在网页上,则是浏览器引擎干的事情.
浏览器引擎非常重要的一项工作就是将html标签根据css样渲染成友好的页面呈现在大家面前.
而这些新闻类的APP大多是web app,也就是APP上内置了浏览器,只是将网页通过该内置的浏览器演示出来.
其本质还是一个html的网页.