页面整体变灰效果

已于 2022-12-12 16:53:06 修改
阅读量115 收藏
点赞数
分类专栏： 网站开发 文章标签： html5 css javascript
于 2022-12-12 16:52:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53898287/article/details/128289605
版权

页面整体变灰效果

原因

  • 每当公祭日或者国家有社么大的事情发生，我们日常生活所访问的网页都会变灰，它的实现原理也非常简单，只需要一行代码就可以了

实现

style="filter:grayscale(100%)"
  • 这个css样式就可以使页面变灰，括号里面的100%是变灰的程度，可以根据页面效果进行调节
  • 通常这个样式会使用在html头标签中
<html style="filter:grayscale(100%)">
    
</html>
  • 这样可以做到使全部页面陡变成灰色

类似于这样：

请添加图片描述

流火七月_Hy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 整体页面 变为 灰色
lllsj的博客
12-20 323
在全国哀悼日，网站需要设置成黑白的，只需在 .css 文件中body里面加下面两行行代码就可以： body{ filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1); -webkit-filter: grayscale(100%); } 转载至：https://blog.csdn.net/qq_42715494/article/details/112254829 ...
html整体页面灰色,让网页整体变灰的方法
weixin_39614322的博客
05-31 1344
方法1：支持IE-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}说明：此方法支持IE，不支持Firefo...
HTML-如何让网站变成灰色？
荷塘月色
12-10 987
在某些特定的时候，我们经常会看到网站会将整体布局设置成灰色色调，以示哀悼。 那么这是怎么实现的呢？
网页快速置灰效果
zezejingi的博客
12-08 808
网页快速置灰效果
html页面整体变灰,“天地失色”如何让HTML网页变成灰色素调
weixin_31366459的博客
05-31 1186
title: 如何网页变成灰色素调date: 2020-04-04 23:31:42tags: [Hexo,建站]categories: [建站]先来看几个效果图layui社区腾讯首页CSDN百度首页(忘记截图)实践 - 照猫画虎先找点HTML页面最好有文字有图片，或者自己随意写几个，这里从网上下载一个简单页面来演示。随意下载一个模板网页，先来预览下未修改前的样式：素调 - 方式一：在CSS添加以...
前端实现项目整体页面变灰效果
qq_68183978的博客
12-02 304
前端使用css实现项目整体页面变灰效果
H5 页面整体变灰色的的代码
05-01
首先，我们需要知道的是，实现页面整体变灰色通常利用CSS3的滤镜（filters）属性。滤镜可以对元素进行图像处理，比如模糊、灰度、饱和度等。在本例中，我们主要关注`filter: grayscale(100%)`，它可以使元素变为全灰...
前端页面，网页整体变灰
01-20
在描述中提到的代码片段是针对网页整体变灰的解决方案： ```css html { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } ``` 这段CSS代码将应用一个`grayscale`滤镜...
使整个页面变灰 样式代码
04-21
本文将详细介绍如何通过简单的CSS代码实现网页整体变灰的效果。 #### 二、关键知识点解析 ##### 2.1 CSS滤镜属性 为了实现整个页面变灰的效果，主要依赖于CSS中的`filter`属性。该属性可以对元素应用多种视觉效果...
网页整体变灰白色(兼容各浏览器)实例
09-05
本实例主要介绍如何实现网页整体变灰白色，并确保这个效果在各种主流浏览器中都能正常工作。 首先，我们可以利用CSS3的滤镜（filter）属性来实现这一效果。滤镜是一种能够改变元素外观的样式规则，它允许我们应用...
灰黑渐变风格网页模板
01-21
网格系统是组织内容的有效工具，能保证页面元素的对齐和平衡。 4. **字体选择**：字体需与整体风格相协调。在灰黑渐变背景下，高对比度的无衬线字体通常更易于阅读。可以调整字体大小、行高和字母间距以优化阅读...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 685
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
软件设计之HTML5
thm19990903的博客
08-04 1877
HTML：Hyper Text Markup Language 超文本标记语言。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 222
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 678
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 679
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
CSS 多按钮根据半圆弧度排列
最新发布
前端技术
08-08 400
多个按钮根据弧度，延边均匀排列。
CSS文本两端对齐
yan1915766026的博客
08-07 379
表单两端对齐怎么写？一个个加空格？叫你CSS轻松搞定
深信服经典16:9灰色PPT模板分享
该模板采用了深信服品牌风格，整体色调以优雅的灰色为主，给人一种专业且稳重的感觉，适合用于各类技术分享、战略规划或企业报告。模板的布局遵循16:9的宽高比，适应于现代投影设备的屏幕显示，确保了视觉效果的一致...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值