iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >如何修改CSS样式实现网页灰色
  • 726
分享到

如何修改CSS样式实现网页灰色

2023-06-08 04:06:15 726人浏览 八月长安
摘要

小编给大家分享一下如何修改CSS样式实现网页灰色,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!第一、网页黑白代码样式A第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰

小编给大家分享一下如何修改CSS样式实现网页灰色,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

第一、网页黑白代码样式A第一种:修改CSS文件

我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰

CSS代码
 

网页黑白代码样式A

html {filter: progid:DXImageTransfORM.Microsoft.BasicImage(grayscale=1);-WEBkit-filter: grayscale(100%);}

也推荐这种代码网页黑白代码样式B

<style>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;}</style>

这里我们可以将代码添加到HEAD模板中,要实现全站才可以。

第二种:在网页的<head>标签内加入以下代码

如果你不想改动CSS文件,你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰

代码
 

<style type="text/css">html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</style>

第三种:修改<html>标签加入内联样式

如里上面的两种方式都不喜欢,可以通过修改<html>标签,以加入内联样式的方法,达到网页变灰的效果

代码

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
 

第四种:作者本人用的CSS代码

代码:

body *{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; }

这里,我们根据实际的需要选择添加到代码中。

看完了这篇文章,相信你对“如何修改CSS样式实现网页灰色”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 如何修改CSS样式实现网页灰色

本文链接: https://www.lsjlt.com/news/251685.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何修改CSS样式实现网页灰色
    小编给大家分享一下如何修改CSS样式实现网页灰色,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!第一、网页黑白代码样式A第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰...
    99+
    2023-06-08
  • 如何使用css样式把图片改为灰色
    这篇“如何使用css样式把图片改为灰色”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用css样式把图片改为灰色”,小编整理了以下知识点,请大家跟着小编的...
    99+
    2024-04-02
  • 如何使用CSS实现网站变成灰色
    这篇文章给大家分享的是有关如何使用CSS实现网站变成灰色的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。 ...
    99+
    2024-04-02
  • php页面中如何修改css样式
    这篇文章主要介绍“php页面中如何修改css样式”,在日常操作中,相信很多人在php页面中如何修改css样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php页面中如何修改css样式”的疑惑有所帮助!接下来...
    99+
    2023-07-05
  • 如何使用CSS将网站网页变灰色代码
    小编给大家分享一下如何使用CSS将网站网页变灰色代码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法如下:这段CSS代码可以变...
    99+
    2024-04-02
  • jQuery如何修改CSS样式?
    ...
    99+
    2024-04-02
  • javascript如何修改css样式
    这篇文章给大家分享的是有关javascript如何修改css样式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 修改方法:1、用“元素.style.属...
    99+
    2024-04-02
  • jquery如何修改css样式
    使用jquery修改css样式的方法:1.新建html项目,引入jquery;2.创建div标签,设置样式;3.使用css()方法修改样式;具体步骤如下:首先,新建一个html项目,并在项目中引入jquery;<script type...
    99+
    2024-04-02
  • 网站变黑白灰色如何实现
    这篇文章主要介绍了网站变黑白灰色如何实现,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。2008.5.12四川汶川大地震,带走了很多生命,令人惋惜,为了表示对遇难同胞的深切哀悼,国务院决定2008年5月19日至21日为全国...
    99+
    2023-06-08
  • 如何正确修改CSS样式
    CSS(层叠样式表)是前端开发中的重要组成部分,通过CSS可以控制网页的外观和布局。在日常的开发过程中,我们常常需要修改CSS来达到我们想要的效果。如何正确修改CSS呢?下面就来谈一下我的看法。首先,我们要知道CSS的基本语法。CSS由属性...
    99+
    2023-05-14
  • jquery中如何修改css样式
    这篇文章将为大家详细讲解有关jquery中如何修改css样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jquery中修改css样式的方法:1、使用“css("属性名","...
    99+
    2023-06-15
  • 如何在ExtJS中修改CSS样式
    ExtJS 是一款功能强大的 JavaScript 库,旨在简化 Web 应用程序的开发。在使用 ExtJS 进行开发时,我们往往需要对 CSS 样式进行定制化以满足业务需求。本文将介绍如何在 ExtJS 中修改 CSS 样式。一、了解 E...
    99+
    2023-05-14
  • css如何修改行内的样式
    本文小编为大家详细介绍“css如何修改行内的样式”,内容详细,步骤清晰,细节处理妥当,希望这篇“css如何修改行内的样式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 行内款式...
    99+
    2024-04-02
  • 如何修改Dreamweaver编辑器颜色样式
    这篇文章给大家分享的是有关如何修改Dreamweaver编辑器颜色样式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。今天在使用Dreamweaver的时候代码颜色比较刺眼,不知道是什么原因导致代码颜色的变化,没办...
    99+
    2023-06-08
  • win7屏保灰色无法修改如何解决
    要解决Win7屏保灰色无法修改的问题,可以尝试以下几种方法:1. 确保足够的权限:以管理员身份登录计算机,然后尝试修改屏保设置。2....
    99+
    2023-09-17
    win7
  • dreamweaver cs5网页如何链接css样式
    这篇文章将为大家详细讲解有关dreamweaver cs5网页如何链接css样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先打开我们的软件cs5点就文件新建的选项空白页---css--创建然后就出现...
    99+
    2023-06-08
  • CSS如何控制网页打印样式
    这篇文章主要介绍CSS如何控制网页打印样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导...
    99+
    2023-06-08
  • Vant主题定制如何修改颜色样式
    目录Vant主题定制修改颜色使用场景第一种:完全替换主题色或其他样式第二种:直接覆盖样式Vant自定义主题颜色先看效果图步骤方法Vant主题定制修改颜色 使用场景 需要修改vant组...
    99+
    2024-04-02
  • 如何使用CSS修改字体样式
    CSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于网页设计的样式语言,使得Web开发人员可以通过调整元素的外观和排版来实现更好的用户体验。其中一个常见的修改就是字体样式。CSS样式表可以通过非常简单的方式...
    99+
    2023-05-14
  • jquery中如何动态修改css样式
    小编给大家分享一下jquery中如何动态修改css样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jquery动态修改css样...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作