CSS灰度图片可以使用 grayscale() 过滤器功能将输入图像转换为灰度

最新推荐文章于 2024-07-04 18:24:34 发布

前端小云儿

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量1k

点赞数

分类专栏：前端静态页面以及逻辑 css 文章标签：大数据

本文链接：https://blog.csdn.net/jieweiwujie/article/details/125760454

版权

前端静态页面以及逻辑同时被 2 个专栏收录

117 篇文章 17 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

css

75 篇文章 1 订阅

订阅专栏

本文介绍如何利用CSS的grayscale()过滤器功能，将彩色图像转换为灰阶效果，实现图片的灰度显示。这种方法适用于前端开发中的图像样式处理。

摘要由CSDN通过智能技术生成

<template>
  <div class="wrapper">
    <img src="./logo.png" />
    <img src="./logo.png" class="wrapperImg" />
  </div>
</template>
<script>
export default {
  name: "Table",
  components: {},
  data() {
    return {};
  },
  methods: {
    jsFun() {
      console.log(1);
    },
  },
  mounted() {
    this.jsFun();
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 20px;
  .wrapperImg {
    filter: grayscale(100%);
  }
}
</style>