网页的默哀滤镜

最新推荐文章于 2024-06-26 09:37:46 发布

原创最新推荐文章于 2024-06-26 09:37:46 发布 · 659 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#网站的默哀滤镜 #网页的默哀滤镜 #默哀滤镜 #网页黑白色 #css的filter

CSS 专栏收录该内容

5 篇文章

订阅专栏

仅作为知识点记录

网页的默哀滤镜

一、前言
二、语法
- 1.官方解释
- 2.官方语法
三、实现
- 1.代码
- 2.效果

一、前言

我们常常会在百度百科中看到有人去世时，关于ta的百度百科页会变成黑白色，而其他的无影响。这难道是又重新创建或者修改了整个网页的内容吗？那工作量和时间也来不及呀，其实不然，而是有一个属性，只需设置该属性就可以改变一整个网页的色调

二、语法

1.官方解释

CSS3 filter(滤镜) 属性：定义了元素(通常是img标签)的可视效果

2.官方语法

img {
    -webkit-filter: grayscale(100%); /* 支持谷歌、苹果、 Opera浏览器*/
    filter: grayscale(100%);
}

三、实现

1.代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>默哀滤镜</title>
    <style type="text/css">
    	html{
	        -webkit-filter: grayscale(100%);  
    	    filter: grayscale(100%);
  		}
    </style>
  </head> 
  <body>
	<img width="200px" src="/TestModel/imgs/colorful.jpg">
	<h1>h标签的大标题</h1>
	<p style="color: red">p标签的彩色字体内容<p>
  </body>
</html>