开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS中使用currentColor的文本阴影不透明度

基础概念

currentColor 是一个 CSS 属性值，它表示当前元素的文本颜色。通过使用 currentColor，可以将文本颜色与其他属性（如文本阴影）共享，从而实现更灵活的设计。

相关优势

简化代码：使用 currentColor 可以减少重复的颜色定义，使代码更加简洁。
动态颜色：当文本颜色发生变化时，使用 currentColor 的其他属性（如文本阴影）会自动更新，保持一致性。
可访问性：通过共享颜色，可以更容易地确保文本和其阴影在视觉上的一致性，有助于提高可访问性。

类型

currentColor 主要用于以下 CSS 属性：

text-shadow
box-shadow
border-color
outline-color

应用场景

假设你有一个按钮，点击按钮时文本颜色会发生变化，同时希望文本阴影的颜色也相应变化。使用 currentColor 可以轻松实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CurrentColor Example</title>
    <style>
        .button {
            color: blue;
            text-shadow: 2px 2px 4px currentColor;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            color: red;
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>

在这个示例中，当按钮悬停时，文本颜色变为红色，同时文本阴影的颜色也会自动变为红色。

遇到的问题及解决方法

问题：CSS中使用`currentColor`的文本阴影不透明度不正确

原因：currentColor 只传递颜色值，不传递不透明度（opacity）。因此，如果文本颜色包含不透明度，文本阴影可能不会按预期显示。

解决方法：可以通过 CSS 变量（自定义属性）来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CurrentColor Opacity Example</title>
    <style>
        :root {
            --text-color: rgba(0, 0, 0, 0.8);
        }

        .button {
            color: var(--text-color);
            text-shadow: 2px 2px 4px rgba(var(--text-color-rgb), 0.5);
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            --text-color: rgba(255, 0, 0, 0.8);
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>

在这个示例中，我们使用 CSS 变量 --text-color 来存储文本颜色，并在 text-shadow 中使用 rgba(var(--text-color-rgb), 0.5) 来设置阴影颜色和不透明度。通过这种方式，可以确保文本阴影的不透明度按预期显示。

参考链接

希望这些信息对你有所帮助！

相关搜索:使用CSS在图像上获得50%不透明度的覆盖/阴影图像中的CSS不透明度 JavaFx CSS TableView仅更改不透明度文本使用CSS仅在文本阴影中显示文本笔触不透明度影响文本的HTML CSS背景图像背景的CSS层-上层使用颜色不透明度线性渐变背景的CSS不透明度？在css中为图像赋予不透明度使文本变得模糊实现背景滤镜: CSS中的不透明度(0%)将不透明度设置为菜单,但在CSS中保持文本不透明带有CSS变量的文本阴影如何使用css更改顶部图像层的不透明度？变换元素内部的CSS不透明度动画如何在颤动中改变方框阴影的高度、宽度和不透明度？CSS图像在容器中的定位和不透明度 CSS3:在div和文本上使用不透明度的悬停效果有没有办法使用CSS控制边框颜色的不透明度/透明度？使用css的多个3D文本阴影未在材质上设置不透明度的ThreeJS中的不透明度设置标记的不透明度，但不设置图例中的不透明度

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

现代 CSS 颜色指南

在 CSS 中，颜色无处不在，它可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 hex 和 RGB，其实表示颜色的方式有很多，下面就来看看CSS中的颜色体系。

02

纯干货！谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

作为目前最主流的设计风格和主题规范之一，Material Design 的深色主题设计规范非常值得参考学习。这是一套高度自恰的设计规范，有着相当严密的内部逻辑，在 Material Design 的内在隐喻逻辑的推动下，严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。

01

css opacity属性_CSS中的opacity属性[通俗易懂]

With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating websites. Thus one must be aware of which properties to use while creating a website.

02

一篇文章带你了解CSS Opacity(透明度)

opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

01

PS|三大图层样式运用

PS作为一个很全面的图像处理软件，为大家提供了许多的功能，而其图层样式更是使得使用者有更多的方式对图像细节进行处理。接下来，就让我们去学习一下PS三大常用图层样式。

03

AngularDart Material Design 按钮顶

将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。您也可以像使用普通DOM元素一样使用CSS设置按钮的样式，尽管这也会影响禁用状态：

04

一篇文章带你了解CSS3 滤镜(Filters)——下篇

上篇文章，我们介绍了CSS3滤镜效果的模糊效果、设置图像高度、调整图像对比度、向图像添加阴影等知识，这篇文章紧承上篇文章，我们重点介绍下CSS3滤镜效果的将图像转换为灰度、在图像上应用色相旋转、对图像应用不透明度知识。

02

前端特效开发 | JS实现聚光灯看图效果

HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感觉，所以人们往往喜欢在明亮的场景中来体验世界的美好。对于前端开发来说，想要让用户能在更明亮的状态下查看各种图片，那就必须为页

05

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见，以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。

01

Bootstrap 4首个维护版发布新增多项功能

Bootstrap 4 正式发布后的两个多月，Bootstrap 4.1 发布了。此次更新包括程序修复、文档更新、构建工具更改，以及新增了一些功能。

02

教你调出经典白青色

日系色调透露着淡雅、柔美、低饱和，给人带来静谧与纯净的观感。今天小轻教大家如何把一张照片简单几步变成日系小清新，步骤详细，要耐心学习哦！

02

如何使虚拟现实体验更加真实？（下）

大家好，我是堪萨斯州立大学的助理教授 Sungchul Jung。我将通过游戏体验介绍我们的研究，即振动对对称和非对称沉浸式多用户的影响（All Shook Up: The Impact of Floor Vibration in Symmetric and Asymmetric Immersive Multi-user VR Gaming Experiences）。

02

matplotlib入门（二）

添加无指向性注释文本，设置文本的x和y坐标(文本左下角），文本类容，粗细风格和颜色

04

做不好阴影和模糊？UI设计师看这一篇就够了

静电说：阴影和模糊在UI界面中是必不可少的效果，但是想要做好它们却没有那么简单。很多设计师小伙伴做的阴影，要么是不够通透，要么阴影生硬，投影角度有问题。那么今天就为大家推荐这篇设计阴影和模糊的全攻略，系统为大家剖析阴影和模糊效果的方方面面。觉得有用，记得点赞，并分享给小伙伴。

02

PS|如何制作‘时空门’？

哆啦A梦想必大家小时候都看过，应该也都有一个“拥有叮当猫的百宝袋”的梦想。而要说起百宝袋什么最吸引人，那一定是少不了‘时空门’——可以去世界上的任何地方。在塔克拉玛干沙漠里游泳、珠穆朗玛峰上泡温泉、马里亚纳海沟踢足球统统都不是梦。今天就为大家讲解如何在一张图片里制造‘时空门’。

03

Adobe After Effects视频特效制作（ae）软件win/mac下载安装

Adobe After Effects（简称AE）是一款制作动态影像设计的专业非线性编辑软件，被广泛应用于影片、电影、广告、多媒体以及网页等领域。在本文中，我们将详细介绍AE的特色功能和使用方法，并以实例来演示如何实现基础动画效果。

00

萧蕊冰：了解UI设计配色技巧，让你的设计更和谐！

哈喽大家好，今天的分享是关于UI设计配色技巧的，怎么才能让我们的界面配色更加和谐，是一个设计师需要重视的问题。我们要对颜色的敏感度，颜色的运用常识要有所了解。今天的文章将帮助你更加了解UI设计配色中的技巧、理论知识以及如何运用它们。

02

谷歌华人研究员发布MobileNeRF，渲染3D模型速度提升10倍

---- 新智元报道编辑：LRS 【新智元导读】最近谷歌发布了全新的MobileNeRF模型，直接将神经辐射场拉入移动时代，内存需求仅为1/6，渲染3D模型速度提升10倍，手机、浏览器都能用！ 2020年，神经辐射场（NeRF）横空出世，只需几张2D的静态图像，即可合成出该模型的3D场景表示，从此改变了3D模型合成的技术格局。 NeRF以一个多层感知器（MLP）来学习表示场景，评估一个5D隐式函数来估计从任何方向、任何位置发出的密度和辐射，可在体渲染（volumic rendering）框架下

03

PDF Plus for Mac(PDF处理工具)

PDF Plus Mac版是Mac平台上的一款PDF文档处理工具，功能强大，只需三个简单的步骤即可帮助您合并，拆分，加水印和裁切PDF文档。

03

一些最常见和最有趣的CSS错误

当我们非常专注于处理Web项目时，我们往往会忘记或犯一些可能导致无效CSS代码的错误。我喜欢称这些“潜意识错误”。导致我们问自己的那种错误：“糟糕，我为什么要这样做？”而解决它们并不需要花费很多时间，只要您第一时间发现它们即可。

04

Threejs入门之十二：认识Threejs中的材质

材质是描述对象的外观，Threejs中提供了很多材质的API，今天我们来了解几个常用的材质类API 1.Material Material是所有材质的基类，所有继承自Material的材质都基础了Material的属性和方法，Material常用的属性有： alphaTest：控制透明度的alpha值，默认值为0，如果设置不透明度(opacity)低于此值，则不会渲染材质。 depthTest：是否在渲染此材质时启用深度测试。默认为 true depthWrite : 渲染此材质是否对深度缓冲区有任何影响。默认为true id : 材质实例的唯一编号 needsUpdate：指定需要重新编译材质 opacity : 在0.0 - 1.0的范围内的浮点数，表明材质的透明度。值0.0表示完全透明，1.0表示完全不透明。如果材质的transparent属性未设置为true，则材质将保持完全不透明，此值仅影响其颜色。默认值为1.0。 side：定义材质将要渲染哪一面 (正面，背面或两面)。默认为THREE.FrontSide(正面)。另外两个选项为THREE.BackSide(背面)和THREE.DoubleSide(两面) transparent :定义材质是否透明,默认为false visible: 材质是否可见。默认为true 2.MeshBasicMaterial MeshBasicMaterial，基础网格材质，我们在前面已经用过好多次了，这种材质不受光照的影响，没有阴影；但是可以给它设置颜色、不透明度

01

业界 | 谷歌提出多图像抠图算法，并弥补水印技术的一致性漏洞

选自Google Research 机器之心编译参与：黄小天、路雪水印在日常生活中随处可见，它是一种保护图像图片版权的机制，防止未经许可或授权的使用；而自动去水印的计算机算法的存在却可使用户轻松获取无水印图像，这是由于当前的水印技术存在一个漏洞：水印通常被一致地添加到很多图像上，这种一致性可用于反转水印的处理过程。有鉴于此，谷歌在论文《On the Effectiveness of Visible Watermarks》中针对可泛化的多图像抠图算法，提出了可使水印足够鲁棒以免被从单个图像中去除的方法，而

06

1.5 万字 CSS 基础拾遗（核心知识、常见需求）

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。

03

1.5 万字 CSS 基础拾遗（核心知识、常见需求）

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。

02

dotnet OpenXML 颜色变换

颜色变换是对基础颜色的相关属性的修改。例如，透明度是与颜色相关的属性。颜色转换被指定为任何颜色模型标签的子标签，可以在任何颜色加上颜色变换

02

UI技巧 | 用户界面设计的10个小技巧

点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源

01

时至今日，浏览器色彩居然仍旧失真？

物理上正确的颜色渐变（例如，沿着颜色之间的失焦边缘，你会得到想要的），在中点周围同样明亮，代表两种颜色之间的平均。不正确的渲染会使中间变成浑浊的暗色。

那些与 IE 相伴的日子

Internet Explorer（简称：IE）是微软公司 (https://baike.baidu.com/item/微软公司/732128) 为了对抗网景浏览器 (https://baike.baidu.com/item/网景浏览器)（NetscapeNavigator）从而投入开发，并于 1995 年推出的一款网页浏览器，曾经一度成为同 Windows 系统捆绑安装的流氓软件横行于世，也占据了极高的市场份额，但在近些年里，它却一直因为本身的落后而被众多用户和开发者诟病。

02

QQ隐藏图原理与C#实现(含源文件)

QQ群聊的背景色为白色，而打开图片后的背景色为黑色，如果能巧妙修改图片各个像素的透明度，就可以达到在不同背景下显示出不同图片的功能。

01

[flutter专题]6详解AppBar小部件

应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。

01

【PS算法理论探讨一】 Photoshop中两个32位图像混合的计算公式（含不透明度和图层混合模式）。

大家可以在网上搜索相关的主题啊，你可以搜索到一堆，不过似乎没有那一个讲的很全面，我这里抽空整理和测试一下数据，分享给大家。

02

运维：推荐一款非常实用的窗口管理增强工具WindowTop

WindowTop Pro专业版是一款Windows上使用的窗口管理增强工具，支持Win7及以上系统，将当前窗口设置在顶部，使其变暗，应用透明性，缩小它，等等！该软件使您可以将任何窗口固定在顶部，启用窗口透明度，甚至单击透明窗口，设置窗口黑暗/阅读模式，将窗口缩小到小尺寸等等。您可以轻松地将窗口设置在顶部，并用红框突出显示最顶部的窗口。您可以在设置中配置此行为（框架颜色等）。

02

TurboCollage for Mac(照片拼贴软件)

TurboCollage for Mac是一款照片拼贴软件，拥有7种拼贴风格模板，和数千种的拼贴设计，让你创作出漂亮、独一无二的照片。使用TurboCollage中文版你可以选择图片图片大小，设计拼贴方案，自定义背景图片等，创建图片拼贴。

02

CSS3之opacity属性的简单使用

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141344.html原文链接：https://javaforall.cn

01

基础渲染系列（十二）——半透明阴影

这是关于渲染的系列教程的第12部分。在上一部分中，我们实现啦渲染半透明表面，但是尚未覆盖它们的阴影。现在，我们来解决这个问题。

04

如何使用CSS创建按钮悬停动画效果？

opacity − 这个属性设置元素的透明度级别，其中1表示完全可见，0表示完全透明。

01

玻璃拟态（Glassmorphism）设计风格

毛玻璃拟态模仿了塑料材质（凹凸质感，凸显层次感），这个新的视觉风格更加注重垂直空间Z轴的使用：

03

重磅！iOS应用黑暗模式设计终极指南（附套件下载）

在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。

01

jQuery里面的动画

finish 等价 stop(true,true)，当前动画停止，不清除队列，直接队列完成

02

【PS算法理论探讨三】 Photoshop中图层样式之颜色叠加/渐变叠加/图案叠加算法原理初探讨。

颜色叠加：这个和编辑菜单下的填充颜色基本是一个意思，相当于在原有的图层上部添加了一个纯实色的虚拟图层，选项里的不透明度和混合模式和普通的概念是一个意思。注意这里是不改变原有图层的不透明度的。

03

PS基础，让你弄懂画笔工具

Alt+Shift+右键单击（Mac上Control + Option + Cmd +单击）可使用色彩选择器。编辑->常规下的光标选项

02

总结CSS3新特性(颜色篇)

总结CSS3新特性(颜色篇) 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调)

[首发] 苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。在这里静电结合WWDC 2019的官方视频与苹果官方资料，花了一整天的时间翻译整理，为大家带来最全面细致的iOS 13交互设计指南及规范解析。赶紧转发收藏吧！

04

如何在 CSS 中设计出漂亮的阴影？

然而，当我环顾网络时，很明显，大多数阴影并不像它们所希望的那样丰富，网络上覆盖着模糊的灰色盒子，看起来并不像影子。

01

Figma技巧超全合集！40+隐藏技能！快收藏！（第一辑）

静电说：今天为大家带来了超全的Figma技巧合集，足足有40多个哦！这次算是最全的技巧文章了，建议收藏下来慢慢看~今天是第一辑，下周我们发第二辑。

03

CSS3 opacity 属性

opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

03

css 背景透明

今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。

04

【PS算法理论探讨二】 Photoshop中图层样式之投影样式算法原理初探讨。

接下来几篇文章我们将稍微简单的探索下PS中多种图层混合模式的算法内部原理，因为毕竟没有这方面的官方资料，所以很多方面也只是本人自己的探索和实践，有可能和实际的情况有着较大的差异。

02

高级 SwiftUI 动画 — Part 1：Paths

在本文中，我们将深入探讨一些创建 SwiftUI 动画的高级技术。我将广泛讨论 Animatable[1] 协议，它可靠的伙伴 animatableData[2]，强大但经常被忽略的 GeometryEffect[3] 以及完全被忽视但全能的 AnimatableModifier[4] 协议。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭