600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 图片如何轻松转换成灰度图 – CSS – 前端 css表格线

图片如何轻松转换成灰度图 – CSS – 前端 css表格线

时间:2019-09-22 01:06:57

相关推荐

图片如何轻松转换成灰度图 – CSS – 前端 css表格线

偶这里以今日头条的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的网页.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。