全国默哀网站首页都要变成灰色的简单解决办法

最新推荐文章于 2022-12-07 14:49:13 发布

转载最新推荐文章于 2022-12-07 14:49:13 发布 · 2.2k 阅读

为响应全国默哀活动，本文提供了一种使网站页面变为灰色的方法：通过在首页body中添加特定样式代码实现。此外，还建议博主们可以通过自定义CSS来将个人博客页面调整为灰色，共同表达哀悼之情。

今天全国默哀网站首页都要变成灰色
给大家一个简单的解决办法在首页的body中加上 style="FILTER: alphaopacity=80 gray"

大家也可以在自己的blog中定制css 使自己的blog也变成灰色的

暂时放下首页,一会撤下,大家一起来默哀!

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34010949

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

哀悼日网站全站变灰代码

Voyager-Lc

04-04

496

一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。第一种：修改CSS文件: 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰。代码: html { filter: progid:DX...

网页默哀,网页黑白效果

09-20

网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白网页默哀，网页黑白

参与评论您还未登录，请先登录后发表或查看评论

全国默哀日中小程序显示灰色

weixin_43794749的博客

04-05

4062

2020/04/04全国默哀日此时大家发现很多网站,app,小程序的整体色调全部变为了灰色,其实并不是所有的图标全部替换了灰色,只是在css中设置了一个属性这以小程序为例子 app.wxss全局的样式文件中 page { -webkit-filter: grayscale(.95); } 此时小程序整体就变为了灰色 ...

哀悼日，只让首页变灰，其他页面都…

Peter的游击战

12-26

646

我用一个简单的办法把首页变黑了，其他页面都正常。看我的演示：http://www.dxszx.com 也不知道有人需要不。需要的跟帖我发上来。先打包备份template\default\，以便明天不需要变黑白了覆盖还原回来第一步：进入X程序风格目录template\default\common 复制header.htm，黏贴并且重命名为 “header22.htm” 第二步：修改

uniapp屏幕置灰

weixin_46029283的博客

12-07

1045

uniapp屏幕置灰类似于哀悼日

网站变灰色(默哀专用)(转)

weixin_30388677的博客

07-13

3459

如果用传统的方法将网站变成黑白色非常的麻烦，需要更换页面的文件，并且要对图片进行更改。如果你的网站是用CSS的话，那就很简单了，只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)...

网络默哀;网站变灰色---CSS样式

qitaohai007的专栏

08-15

2232

网络默哀CSS样式设置

整个网站变成灰色的效果是怎样实现的？

01-08

2020年4月4日，我们发现各大平台的网站主页和内容都变成了灰色，比如百度、B 站、爱奇艺、优快云、微信支付图标以及我们的QQ头像等等。有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，...

给网站添加灰白滤镜（默哀主题色）

01-08

默哀专用，添加在html根节点或者body节点，致敬英烈们，感恩你们的守护~~ 1、天猫 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: ...

默哀词.doc

09-18

默哀词.doc

门户网站将首页变成灰色

似水流年

04-21

1506

在＜head＞标签中增加:body{filter: Gray} 就可以实现当前页面变灰色.悼念日.

网页是怎么变灰的？今日Web要求：所有网页变成灰色。

qq_35581156的博客

04-04

6780

为逝者默哀。向勇士们致敬。天下兴亡，匹夫有责。身无一技之长，我很愧疚。如何让所有的页面全都化成灰色的沉重：filter 我们浏览的网页是怎么变灰的呢？只需要下方一行代码即可换成灰色。 html{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } 当然如果谁家网站有一键换肤，那我只能说：高级，请一键换色。但是，如果...

默哀日网站置灰，支持IE浏览器&h5

wodejava2012的博客

05-08

1438

前端有很多方法可以将网站设置成完全灰色，可以通过调CSS样式，可以加滤镜，可以通过js控制样式等。然而，对应不那么熟悉前端的后台开发或维护人员，只能从网站找些资源，东拼西凑。尝试很多次，最麻烦的是IE浏览器网页死活不变灰色。下面以“我”解决过的一个生产问题为例，彻底解决了手工替换彩色图标、图片的尴尬且耗时的情况，支持IE浏览器。在html中引入css样式（不支持IE显示置灰）对于一开始...

全国哀悼日网站页面变成灰色的filter方法

HELLO WORLD

09-28

4702

为表达哀悼，一般在特定日期网站都是呈现灰色状态的。下面分享一下如何实现 > 直接在*.css文件最前面加入 body{ filter:Gray; } 或者 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 其他HTML页面 html { filter:progid:DXImageTran...

网站哀悼（全站变灰色）代码

iloli的专栏

04-20

1万+

１、在全站的CSS中写入下面二条中的一条： html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} body {filter: gray;} 最简单的把页面变成灰色的代码是在head 标签之间插入： html {FILTER: gray} ２、由于FLASH不受CSS控制，所以

纯css页面变灰度兼容ie、firefox、chrome、opera、safari

weixin_34204057的博客

04-20

1561

html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;...

沉痛悼念！网站快速变黑白灰色的4种方法

最新发布

06-28

<think>我们正在讨论Vue.js中ElementPlus组件库的el-switch组件。用户的问题聚焦于el-switch在Vue中的渲染效果和功能，特别是结合v-model、v-if和样式设置的情况。根据用户提供的引用，我们有两个相关的引用信息：引用[1]描述了一个问题：在el-table中嵌入el-switch，当更新表格数据后会自动触发开关组件的change事件。这可能是由于数据更新导致组件重新渲染，从而触发了change事件。这提醒我们在使用el-switch时要注意数据更新可能带来的副作用。引用[2]则提到了el-switch在绑定值与回显上的问题，即绑定的值（如“1”和“0”）不能正确渲染到页面上。这通常与v-model的绑定方式以及active-value/inactive-value的设置有关。现在，针对用户的问题：“El-Switch组件在Vue中结合v-model、v-if和样式设置的渲染效果及作用”，我们来详细解释。###1. v-model的作用在Vue中，`v-model`用于双向数据绑定。对于el-switch组件，`v-model`绑定的变量将控制开关的状态。例如：```html<el-switch v-model="switchValue" />``` -当开关打开时，`switchValue`的值变为`active-value`（默认为`true`）-当开关关闭时，`switchValue`的值变为`inactive-value`（默认为`false`）用户可以通过设置`active-value`和`inactive-value`属性来指定开关打开和关闭时绑定的值。例如： ```html<el-switchv-model="form.publish"active-value="1"inactive-value="0"active-text="是"inactive-text="否" />``` 这样，当开关打开时，`form.publish`的值为`"1"`；关闭时，值为`"0"`。同时，开关会显示“是”和“否”的文字。###2.v-if的作用`v-if`是Vue的条件渲染指令。当表达式为真时，渲染该元素；否则不渲染。在el-switch上使用`v-if`可以控制开关的显示与隐藏。例如： ```html<el-switchv-if="hasPermission"v-model="switchValue"/> ```这里，只有当`hasPermission`为真时，才会渲染这个开关。这常用于权限控制或动态界面。###3.样式设置el-switch的样式可以通过以下方式设置： -**内置属性**：如`active-color`（打开时的背景色）和`inactive-color`（关闭时的背景色）。例如：```html<el-switchv-model="switchValue"active-color="#13ce66" inactive-color="#ff4949"/>``` -**自定义样式**：通过添加类名或内联样式，然后编写CSS来覆盖默认样式。例如：```html<el-switchclass="custom-switch"v-model="switchValue"/>``````css.custom-switch .el-switch__core {border-radius:10px;}```###渲染效果el-switch组件渲染为一个带有背景色和滑块的开关。根据绑定的值，开关会显示打开或关闭的状态。同时，如果设置了`active-text`和`inactive-text`，还会在开关内部显示相应的文字。###注意事项1.**数据绑定与回显**：确保`v-model`绑定的值与`active-value`/`inactive-value`匹配。例如，如果绑定的初始值是`'1'`（字符串），而`active-value`设置为`1`（数字），则由于类型不匹配，可能导致回显失败（开关状态不正确）。因此，要保持类型一致[^2]。2.**事件触发**：在数据更新时，如果整个数据对象被替换（比如重新请求列表数据），可能会导致el-switch重新渲染，从而触发`change`事件。如果不想触发，可以考虑在更新数据时使用深拷贝或者避免整个对象的替换[^1]。3.**与v-if一起使用**：当`v-if`的条件变化时，组件会重新创建或销毁。因此，如果开关的状态需要保留，可能需要考虑使用`v-show`（通过CSS切换显示）或者将状态存储在父组件中。###示例下面是一个完整的示例，展示el-switch结合v-model、v-if和样式设置：```vue<template><div><el-switchv-if="showSwitch"v-model="form.publish"active-value="1"inactive-value="0"active-text="是"inactive-text="否"active-color="#13ce66"inactive-color="#ff4949"@change="handleChange"/></div> </template><script>export default{data(){return {showSwitch:true,form: {publish: '0'//初始状态为关闭}};},methods:{handleChange(val){console.log('开关状态变化:', val);}} };</script> <style> /*自定义样式 */.el-switch.custom-switch.el-switch__core{border-radius:10px; }</style> ```在这个示例中：-开关的显示由`showSwitch`控制（初始为显示） -开关的状态绑定到`form.publish`，其值可以是`'1'`（开）或`'0'`（关）-设置了开关的颜色和文字-当开关状态变化时，会触发`handleChange`方法###总结el-switch组件在Vue中通过v-model实现双向绑定，通过v-if控制渲染，通过内置属性或自定义CSS设置样式。使用时需注意绑定的值类型与active-value/inactive-value一致，避免数据更新导致的意外事件触发。§§相关问题§§1. el-switch的active-value和inactive-value属性支持哪些数据类型？2.如何防止在更新数据时自动触发el-switch的change事件？3.el-switch在表格中如何正确绑定和更新行数据？4. v-if和v-show在控制el-switch显示时有何区别？</think>### El-Switch 组件在 Vue 中的渲染效果及功能分析 #### 1. **v-model 双向绑定** El-Switch 的核心功能是通过 `v-model` 实现双向数据绑定： ```vue <el-switch v-model="form.publish" active-value="1" inactive-value="0" active-text="是" inactive-text="否" /> ``` - **渲染效果**：根据绑定的值（如 `form.publish`）自动显示开关状态： - 当值为 `active-value`（"1"）时：开关显示**开启状态**和"是"文字 - 当值为 `inactive-value`（"0"）时：开关显示**关闭状态**和"否"文字 - **作用**：同步用户操作到数据层，无需手动监听事件[^2] #### 2. **v-if 条件渲染** 结合 `v-if` 动态控制开关显示： ```vue <el-switch v-if="hasPermission" v-model="form.enabled" /> ``` - **渲染效果**： - `hasPermission=true`：正常渲染开关 - `hasPermission=false`：**完全移除** DOM 元素 - **作用**：实现权限控制或动态界面，减少不必要的 DOM 渲染 #### 3. **样式设置** 通过属性自定义视觉表现： ```vue <el-switch v-model="theme.darkMode" active-color="#333" inactive-color="#f0f0f0" style="margin: 10px" class="custom-switch" /> ``` - **渲染效果**： - `active-color/inactive-color`：改变开关背景色 - `style`：添加行内样式（如间距） - `class`：通过 CSS 深度选择器定制样式： ```css /* 自定义滑块 */ .custom-switch .el-switch__core::after { background-color: #409eff; } ``` #### 4. **常见问题与解决方案 - **问题1：数据更新触发意外事件** 当表格数据更新时，可能自动触发 `@change` 事件（引用[1]） **解决方案**：使用 `.sync` 修饰符替代直接绑定 ```vue <el-switch :value="row.status" @input="val => updateStatus(row.id, val)" /> ``` - **问题2：值绑定与回显失败**（引用[2]） **原因**：数据类型不匹配（如 `active-value="1"` 但绑定值为数字 `1`） **解决**：确保数据类型一致： ```vue <el-switch v-model="form.publish" :active-value="1"  :inactive-value="0" /> ``` #### 5. 完整功能示例 ```vue <template> <div> <el-switch v-if="user.isAdmin" v-model="config.autoSave" active-text="启用" inactive-text="禁用" active-color="#67C23A" @change="logChange" /> </div> </template> <script> export default { data() { return { config: { autoSave: true }, user: { isAdmin: true } } }, methods: { logChange(val) { console.log("状态变更:", val) } } } </script> ``` ### 总结特性 | 功能 | 作用 | 渲染效果 | |---------------|----------------------------------------------------------------------|------------------------------| | **v-model** | 双向数据绑定 | 自动切换开关状态 | | **v-if** | 条件渲染 | 按条件显示/完全移除组件 | | **样式属性** | 定制颜色、文字等 | 改变视觉样式 | | **事件绑定** | 响应状态变化（需注意数据更新时的副作用） | 触发回调函数 | > 关键点：当在表格中使用时，避免直接修改行数据对象，建议使用唯一标识更新数据源[^1]，同时注意 `active-value/inactive-value` 的数据类型一致性[^2]。

全国默哀 网站首页都要变成灰色的简单解决办法

全国默哀网站首页都要变成灰色的简单解决办法