程序员经验分享-hwhale

图片变成黑白

2023-11-03

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .black{
             filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
        }
    </style>
</head>
<body>
    <img src="./img/head.png" alt="">
    <img class="black" src="./img/head.png" alt="" >
</body>
</html>

效果

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

图片变成黑白 的相关文章

  • 无法在地图循环中访问 Axios 调用的值

    我有一个 javascript 对象 其 ID 对应于一组画廊 我使用地图循环遍历它 在每个循环中 我都会进行 axios 调用来获取当前 id 的图库 最后 我需要一个包含所有画廊内容的数组 问题是地图循环完成后我无法访问数据 当我 co

  • 为什么 useReducer 调度会导致重新渲染？

    假设我实现一个简单的全局加载状态 如下所示 hooks useLoading js import React createContext useContext useReducer from react const Context crea

  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭

  • 绑定 popstate 事件不起作用

    我尝试在浏览器的控制台中输入以下代码 window onpopstate function alert 1 然后单击后退按钮 没有显示任何警报 难道我做错了什么 或者是否不允许将 popstate 事件绑定到控制台的页面 使用 Chrome

  • Pug 从模板内的另一个文件调用 js 函数

    我花了将近四个小时都无法解决这个问题 而且我找不到任何针对此类问题的有用文档 这就是问题 我正在使用 pug jade 模板 我想调用 pug 模板内的函数来转换一些数据 这是主要模板 main template section each

  • 如何动态删除嵌套的json键？

    这是示例 json search facets author language value nep count 3 value urd count 1 source value West Bengal State Council of Vo

  • querySelector 搜索直接子级[重复]

    这个问题在这里已经有答案了 我有一些类似 jquery 的函数 function elem return gt someselector elem 问题是我怎样才能做同样的事情querySelector 问题是 gt 选择器中querySe

  • 使用 babel env 预设时，展开运算符出现语法错误

    我正在努力 现代化 meern io 入门样板 https github com Hashnode mern starter通过替换巴别塔es2015 and stage 0预设为env 然而 似乎env预设无法识别以下片段client m

  • 在动态创建的元素的onclick函数的属性中传递一个字符串

    我试图在动态创建的锚元素的 onClick 事件处理函数的参数中传递一个字符串 请参阅小提琴http jsfiddle net shmdhussain bXYe4 http jsfiddle net shmdhussain bXYe4 我无

  • 是否有任何理由使用 axios 而不是 ES6 fetch [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 研究了 axios 和 ES6 fetch 的文档 我发现两者非常相似 并且都受到 ajax 及其简写的强烈影响 axios 的主要优点是浏览器

  • 如何使用 github 托管外部 CSS 文件？

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github

  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go

  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from

  • 是否有跨浏览器的方式在Javascript中设置style.float？

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作

  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并

  • 为什么浏览器允许onmousedown JS改变href？

    我很长时间以来都注意到 当您尝试复制链接位置或在 Facebook 上打开链接时 它会修改链接并将其传递给l php 例如 我可以被发送到 http www facebook com l php u http 3A 2F 2Fwww goo

  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用

  • 如何计算一行中Flexbox项目的数量？

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据

  • 加载 Angular 库时，IE9 和 IE10 中出现 Angular JS“SCRIPT5007：预期对象”错误

    我正在开发一个 AngularJS 应用程序 该应用程序应在 Firefox IE 9 和 IE 10 上运行 我使用最新版本的 angularjs 库 现在是 1 3 15 服务器端是在JavaEE平台上用Java编写的 服务器运行在Gl

  • 如何强制下载图片？

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att

随机推荐

  • [整理]Android屏幕适配(不同的屏幕分辨率和尺寸)

    Android屏幕适配 目录 Android屏幕适配 概念区分 换算关系 划分标准 Android手机常见尺寸和对应分辨率 部分Android测试机分析 补充9图的使用说明 在实际开发过程中 会遇到不同的机型 为了让控件和布局要在不同屏幕上

  • oracle-02 基本命令

    step1 eg 这一部分内容会保存到 test sql文件中 step2 step 3 当前用户有哪些表格 SQL gt desc user tables SQL gt select table name from user tables

  • 慢sql监控

    1 开启慢sql日志 1 1 windows window的mysql配置 编辑C ProgramData MySQL MySQL Server 5 7 my ini 添加如下 是否开启慢查询日志 1表示开启 0表示关闭 slow quer

  • MySQL中IF函数的使用方法

    定义 IF函数根据条件的结果为true或false 返回第一个值 或第二个值 语法 IF condition value if true value if false 参数 参数 描述 condition 必须 判断条件 value if

  • 【Webpack，Vite】开发中遇到常见问题集合

    1 sass export export 是用于sass文件和js文件关联的 用此可以将sass中样式类似于es6语法中export导出 并在其他样式或者js文件中直接使用 但是 目前只适用于 webpack4 或者 node sass v

  • 【Leetcode刷题】算法：两数之和

    文章目录 一 题目描述 二 尝试1 三 尝试2 四 尝试3 五 尝试4 一 题目描述 二 尝试1 from typing import List class Solution def twoSum self nums List int ta

  • PTA L2-032 彩虹瓶

    彩虹瓶的制作过程 并不 是这样的 先把一大批空瓶铺放在装填场地上 然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里 假设彩虹瓶里要按顺序装 N 种颜色的小球 不妨将顺序就编号为 1 到 N 现在工厂里有每种颜色的小球各一箱 工人需要一箱

  • PhpStorm添加PHP代码规范检查CodeSniffer(phpcs)和PHP代码静态分析工具Mess Detector(phpmd)

    首先需要了解一下这些工具是用来干什么 PHPCS 是 PHP Code Sniffer 一款代码规范检查工具 可以根据你的设置来检查代码规范性问题 PHPCBF 是PHPCS 内置的代码规范修复工具 大部分的代码规范问题它都可以自动修掉 P

  • 讯飞星火认知大模型升级体验

    今天讯飞星火新版本已更新至现网 增加了多模态 插件等很多功能 阅读原文可以申请体验 官网地址 https xinghuo xfyun cn 多模态能力 多模理解 图片 支持用户图片输入 针对图片内容进行视觉问答 图像生成 根据用户的描述 生

  • JAVA Keytool命令详解

    http blog csdn net a0501bqzhxy article details 6052463 Java Keytool 常用命令使用帮助 Keytool 是用于管理密钥和证书的工具 使用户和管理员能管理自己的公 私钥对以及相

  • windows下启动达梦数据库

    打开达梦服务查看器 将dmservice服务启动 再打开达梦服务管理工具进行连接

  • MySQL常见的面试经典108题

    目录 1 MySQL 索引使用有哪些注意事项呢 2 MySQL 遇到过死锁问题吗 你是如何解决的 3 日常工作中你是怎么优化SQL的 4 说说分库与分表的设计5 InnoDB与MyISAM的区别6 数据库索引的原理 为什么要用 B 树 为什

  • Binutils-2.23.2

    http lamp linux gov cn Linux LFS 6 2 chapter06 binutils html http davidgao github io LFSCN chapter06 binutils html Linux

  • Linux命令56问

    目录 2 查看CPU性能的指令 vmstat 3 查看内存使用情况的指令 free 4 查看硬盘使用情况的指令 df 5 查看网络IO情况的指令 ifstat 6 查看机器已建立的TCP连接的指令 Linux常用命令 8 cd命令的作用 9

  • 1-Kubernetes基础入门体系架构学习(一)

    0x00 基础简述 Borg 系统 Kubernetes 系统 1 发展经历 2 简要介绍 3 系统架构 0x01 组件详述 1 Kubernetes Master 2 Kubernetes Node 3 Kubernetes 插件 4 小

  • 【计算机网络】湖科大微课堂笔记 p64-66 TCP的运输连接管理：TCP的连接建立与释放、TCP报文段的首部格式

    文章目录 TCP的运输连接管理 TCP的连接建立 小结 一些例题 TCP的运输连接管理 TCP的连接释放 TCP报文段的首部格式 小结 TCP的运输连接管理 TCP的连接建立 TCP的连接建立要解决以下三个问题 TCP使用 三报文握手 建立

  • Flutter 沉浸式状态栏 安全区域 SafeArea以外的刘海屏 设置颜色

    白色 黑 import dart io import package flutter services dart void main runApp MyApp 白色 if Platform isAndroid 以下两行 设置android状

  • OSPF域内路由

    划分区域之后有什么好处呢 OSPF域内路由 属于同一个区域内的路由 OSPF划分区域的要求 基于链路 一个链路肯定是属于一个区域的 Router LSA 类LSA Network LSA 类LSA 区域内部都会有 类LSA和 类LSA 拓扑

  • 下载IDEA-2020.1

    文章目录 一 下载IDEA 2020 1 一 下载老师发的IDEA 2020 1安装包 二 在百度上搜索官网进行下载 1 网址 https www jetbrains com idea 2 单击 Download 二 安装IDEA 2020

  • 图片变成黑白

    实例

热门标签