使用CSS使图像"灰显"的最佳方式(如果有)是什么(即,无需加载单独的灰显图像版本)?

我的上下文是,表中的行都在最右边的单元格中有按钮,有些行需要看起来比其他行轻一些.当然,我可以很容易地使字体变轻,但我也希望使图像变得更轻,而不必管理每个图像的两个版本.

推荐答案

一定要是灰色的吗?您可以将图像的不透明度设置得更低(以使其变暗).或者,您可以创建<div>个覆盖并将其设置为灰色(更改Alpha以获得效果).

  • HTML:

    <div id="wrapper">
        <img id="myImage" src="something.jpg" />
    </div>
    
  • css:

    #myImage {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
    }
    
    /* or */
    
    #wrapper {
        opacity: 0.4;
        filter: alpha(opacity=40); /* msie */
        background-color: #000;
    }
    

Css相关问答推荐

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

如何将下拉面板放置在MAT-SELECT文本框的正下方

如何为多个背景和棋盘设置不同的大小

Firefox中的解决方法:has(不使用JavaScript)

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

测试响应式设计:手动拖动浏览器窗口与使用设备工具栏

如何使我的标语(h1元素)不居中对齐?

有人可以解释为什么我的 CSS 转换如此突然吗?

老虎机插槽上的 CSS 对齐问题

Ant Design:将位置子菜单移动到屏幕顶部

在表格中隐藏绝对伪元素

AngularJS Graphs & Charts - 实线和虚线的混合

为什么我的 CSS 需要一个它似乎不需要的大括号?

如何断言 CSS 属性包含Cypress 测试中的一些文本?

用 svelte 设计 body 元素

边界半径不起作用

在 RC.1 中,某些样式无法使用绑定语法添加

IE划掉伪元素CSS?

从 css 添加标题属性

仅使用 CSS 交换 DIV 位置