文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

仅更改除悬停图像以外的所有图像的不透明度

基础概念

在网页设计中，不透明度（Opacity）是指元素的不透明程度，取值范围为0到1，其中0表示完全透明，1表示完全不透明。通过调整不透明度，可以实现元素的半透明效果。

相关优势

  • 视觉效果：通过调整不透明度，可以创建出各种视觉效果，如渐变、透明背景等。
  • 用户体验：适当的不透明度可以提高用户体验，使页面元素更加美观和易用。

类型

  • 固定不透明度：设置一个固定的不透明度值。
  • 动态不透明度：根据用户的交互或页面状态动态调整不透明度。

应用场景

  • 背景图像：使背景图像半透明，以突出页面内容。
  • 按钮和图标：通过调整按钮和图标的不透明度，增强交互效果。
  • 图片叠加：在多张图片叠加时，通过调整不透明度实现不同的视觉效果。

代码示例

以下是一个使用CSS和JavaScript实现仅更改除悬停图像以外的所有图像不透明度的示例：

HTML

代码语言：txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Opacity Control</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <img src="image1.jpg" class="image" alt="Image 1">
    <img src="image2.jpg" class="image" alt="Image 2">
    <img src="image3.jpg" class="image" alt="Image 3">
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

代码语言：txt
复制
.image {
    opacity: 0.5; /* 默认不透明度 */
    transition: opacity 0.5s ease; /* 平滑过渡效果 */
}

.image:hover {
    opacity: 1; /* 悬停时的不透明度 */
}

JavaScript (script.js)

代码语言：txt
复制
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.image');
    images.forEach(image => {
        if (!image.matches(':hover')) {
            image.style.opacity = '0.5'; // 设置除悬停图像以外的所有图像的不透明度
        }
    });
});

参考链接

解决常见问题

如果在实现过程中遇到问题，例如不透明度调整不生效，可能是以下原因：

  1. CSS选择器错误：确保CSS选择器正确匹配目标元素。
  2. JavaScript执行顺序：确保JavaScript代码在DOM加载完成后执行。
  3. 浏览器兼容性：检查目标浏览器是否支持相关CSS和JavaScript特性。

通过以上方法，可以有效地调整除悬停图像以外的所有图像的不透明度，并解决常见问题。

相关搜索:更改悬停时的图像不透明度列表- css更改背景图像的不透明度图像悬停覆盖:处理嵌套元素的不透明度CSS对除图像以外的所有对象使用填充使用url覆盖除背景图像以外的所有背景图像如何隐藏除1以外的所有页面上的图像？如何更改新图像对象的不透明度更改png图像中的不透明度/alpha/透明度更改悬停引导时的不透明度在angular和scss中更改悬停时的背景图像不透明度更改多个图像的不透明度Xamarin.Forms图像中的CSS不透明度图像的jquery不透明度转换视差图像上的不透明度降低叠加图像的不透明度将鼠标悬停在图像上，显示文本和不透明度更改将不透明层添加到除所选图像之外的所有滑块图像如何更改悬停时文本的不透明度？使用输入滑块更改图像的不透明度。JQuery如何使用css更改顶部图像层的不透明度？
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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

具体如下所示： // 当鼠标悬停在列表项上时... $('.spotlight ul li').hover(function(){ //...找到它里面的图像，并添加活动类，并更改不透明度为1（...无透明度） $(this).find('img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项，并更改其中的图像的不透明度为我们在...active'); }); 3.3 还原初始状态 还原初始状态主要是发生在鼠标彻底的移开图片区域的时候，这时只需要为最外层的无序列表绑定鼠标移开事件—mouseleave，然后在里面设置所有的图片都不透明度即可...... $('.spotlight ul li').hover(function(){ //...找到它里面的图像，并添加活动类，并更改不透明度为1（无透明度）...img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项，并更改其中的图像的不透明度为我们在

4.4K50

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

    一、跨浏览器透明度 现在，透明度(opacity )是CSS3规范的一部分，但是它存在了很长时间。但是，较旧的浏览器具有不同的方式来指定不透明度或透明度。...二、Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度 当前浏览器中CSS不透明度的最新语法。 示例 的CSS透明度实现方法 Internet Explorer 8和更早版本支持仅Microsoft的属性“ alpha过滤器”来指定元素的透明度。...CSS图像透明度 还可以使用CSS Opacity制作透明图像。 下图中的三个图像均来自同一源图像。它们之间的唯一区别是它们的透明度。 的文字 在元素上使用不透明度时，不仅元素的背景将具有透明度，而且其所有子元素也将变为透明。如果不透明度的值变高，将使透明元素内部的文本难以阅读。

    1.9K10

    Adobe Photoshop 2022 v23.5.2 ACR15 中文一键安装版 X64

    其悬停功能可预览选择并轻易地为图像生知识兔产蒙版；互操作性重大提升，知识兔将内容粘贴到 Photoshop 时可用 Illustrator；分享文件以收集和查看反馈；知识兔新增 Neural Filters...6、高效的工作流程知识兔：由于 Photoshop 用户请求的大量功能和增强，您可以提高工作效知识兔率和创意。自动伸直图像，从屏幕上的拾色知识兔器选择颜色，同时调节许多图层的不透明度，等等。...，其悬停功能可预览选择并知识兔轻易地为图像生产蒙版；互操作性重大提升知识兔，将内容粘贴到 Photoshop 时可用 Illustrator；分享文件以收集和查看反知识兔馈；新增 Neural Filters...3、复杂选择如此简单知识兔：轻松选择毛发等细微的图像元素，进行细化、合成或置入布局中。消知识兔除选区边缘周围的背景色；使用新的细化工具知识兔自动改变选区边缘并改进蒙版。...6、高效的工作流程知识兔：由于 Photoshop 用户请求的大量功能和增强，您可以提高工作效率和创意。知识兔自动伸直图像，从屏幕上的拾色器知识兔选择颜色，同时调节许多图层的不透明度，等等。

    2.1K00

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

    需要注意：Windows 中 Cmd 为 Ctrl，Option 为 Alt 01.按住CMD裁剪图像 您可以通过单击 Cmd 按钮来裁剪图像。...04.CMD后按数字键（改变不透明度） 选择一个元素并单击 cmd 按钮后，您可以通过单击 1 和 9 之间的按钮来更改不透明度。（键 1 为 10%，键 9 为 90%）。你可能知道这一点。...但除此之外；如果快速按 0 两次，不透明度将为 0%。或者，如果您快速按下两个键，它将采用这些键的值（例如，8 和 9 提供 89% 的不透明度。）...此外，可以在不扰乱顺序/比例的情况下相互更换元件。 07.拖动+空格：如果要更改所选区域的位置，可以在选择区域后使用空格键。...所以你有一个最小的工作空间。您可以使用相同的组合键打开面板。 10.Cmd + |：此组合也仅隐藏左侧面板。您可以使用相同的组合再次打开它。 11.Cmd + G: 对选定元素进行分组。

    3K30

    PDF Plus for Mac(PDF处理工具)

    PDF Plus Mac中文版功能介绍合并PDF文档添加/删除PDF文档更改PDF文档的合并顺序立即将所有PDF文档合并到一个PDF文件中以批处理方式拆分PDF文档添加/删除PDF文档以页面和/或页面间隔分割...：文字（这是会在您的PDF文件上加水印的文字）文字颜色（更改文字颜色）字体类型（从20种精选字体中选择）字体大小（更改文本的字体大小）不透明度（使文本更不透明或透明）旋转（以一定角度旋转文本）阴影（通过添加阴影效果使文本更加可见...：图片（您可以在Mac上选择任何JPG，PNG，TIFF，GIF或BMP图片）缩放（根据需要更改所选图像的缩放比例）不透明度（使图像更不透明或透明）旋转（以一定角度旋转图像）质量（增加或降低图像质量）位置...PDF文件保存在您选择的文件夹中以批量模式将PDF文档转换为图像图像格式：JPG，JPEG，JPE，JP2，JPX，PNG，TIFF，TIF，GIF，BMP更改JPG，JPEG，JPE，JP2和JPX格式的图像质量多页支持...GIF和TIFF图像格式调整图像大小并更改其DPI和打印尺寸为图像命名将生成的图像保存在您选择的文件夹中以批处理模式编辑PDF属性添加/删除PDF文档更改PDF文档的以下属性：标题，作者，主题，关键字使用

    2.1K30

    Astute Graphics for Mac(全系列ai插件合集)

    宽度渐变 2、AstuteBuddy 键盘快捷键面板 屏幕实时键快捷方式 与工具箱中的所有Astute Graphics工具一起使用 发现隐藏的功能 3、VectorFirstAid 清理矢量文件 将大纲文本转换回可编辑文本...更改文字点对齐 重新加入路径格式不正确的导入路径 4、InkScribe 精确的路径创建 将本机钢笔工具更上一层楼 约束距离首选项 将路径拖到适当位置，而无需摆弄手柄 5、InkQuest 印前控制和检查...交换通道（墨水映射） 油墨覆盖温度图 分离 6、Texturino 纹理+不透明笔刷 在纹理管理器中组织纹理 高质量重复和非重复纹理 导入自己的纹理 7、DynamicSketch 直观的矢量素描 自然...9、SubScribe 创建准确的艺术品 圆弧按点工具 定向和变换对象 轻松悬停在对象上即可轻松解锁和锁定 10、DirectPrefs 微移距离，角度+引导线 下载Astute Manager时免费...画角度 键盘微动距离 11、Rasterino 图像裁剪+编辑 交互式图像裁剪 修剪空白图像区域 重新链接多个嵌入式图像 12、Stylism 现场效果变得简单 单击并拖动功能的实时效果 实时预览调整

    1.4K20

    python图像处理-个性化头像

    回到我们上面原来的猫图片，只要我们能够将猫图像的圆形区外的所有地方变成完全透明(看不见了)，那么整个图片就变成圆形的了。...这里的putalpha正常里面是放入一个0-255的数字的，表示要将这整张图片设置为透明度为多少，这是方式对于整张图片都更改透明度非常方便，但是对于更改局部或者特定形状部分的透明度就不行了；这里使用另外一种方式...里面白色部分不透明显示出一个圆形。...上面的效果并不是我们想要的，paste除了上面两个参数，还有第三个参数蒙版图像，这里要注意蒙版图像和putalpha的图像有所区别，中间是黑色，边缘是白色；因为蒙版的运行原理是，灰度图黑色时数值是0，表示透明度就是完全透明的意思...，白色数值是255，表示透明图是完全不透明，所以整个效果就是黑色部分会透明显示出下面一层的猫，而白色部分不透明也就保留原来效果。

    1.1K10

    Adobe Photoshop，选择图像中的颜色范围

    如果想替换选区，在应用此命令前确保已取消选择所有内容。“色彩范围”命令不可用于 32 位/通道的图像。 若要细调现有的选区，请重复使用“色彩范围”命令选择颜色的子集。...请参阅调整蒙版不透明度和边缘。 2.从“选择”菜单中，选取了以下选项之一： 肤色选择与常见肤色类似的颜色。启用“检测人脸”，以进行更准确的肤色选择。 示例颜色启用吸管工具，并从图像中选取示例颜色。...在“载入”窗口中，选择所需的预设文件，然后单击“载入”。 文末教程彩蛋 调整蒙版不透明度和边缘 使用“属性”面板可以调整选定图层或矢量蒙版的不透明度。“浓度”滑块控制蒙版不透明度。...在“属性”面板中，拖动“浓度”滑块可调整蒙版不透明度。 到达 100% 的浓度时，蒙版将不透明并遮挡图层下面的所有区域。随着浓度的降低，蒙版下的更多区域变得可见。...单击选项栏中的选择并遮住。您可以使用选择并遮住工作区中的选项修改蒙版边缘，并以不同的背景查看蒙版。 在“选择并遮住”工作区中单击“确定”，将更改应用于图层蒙版。

    11.3K50

    ai创意插件合集Astute Graphics

    功能 1、WidthScribe 可变笔触宽度效果 矢量描边的可变宽度描边 宽度画笔和橡皮擦 宽度渐变 2、AstuteBuddy 键盘快捷键面板 屏幕实时键快捷方式 与工具箱中的所有Astute...Graphics工具一起使用 发现隐藏的功能 3、VectorFirstAId 清理矢量文件 将大纲文本转换回可编辑文本 更改文字点对齐 重新加入路径格式不正确的导入路径 4、InkScribe...Texturino 纹理+不透明笔刷 在纹理管理器中组织纹理 高质量重复和非重复纹理 导入自己的纹理 7、DynamicSketch 直观的矢量素描 自然，简单的绘图工具箱 适用于手写笔设备...圆弧按点工具 定向和变换对象 轻松悬停在对象上即可轻松解锁和锁定 10、DirectPrefs 微移距离，角度+引导线 下载Astute Manager时免费 画角度 键盘微动距离...11、Rasterino 图像裁剪+编辑 交互式图像裁剪 修剪空白图像区域 重新链接多个嵌入式图像 12、Stylism 现场效果变得简单 单击并拖动功能的实时效果 实时预览调整 用户定义的样式预设

    1.9K30

    ai创意插件合集：Astute Graphics Mac下载

    id=ODE3NDU1Jl8mMjcuMTg3LjIyNi4xMjA%3D图片功能特色1、WidthScribe可变笔触宽度效果矢量描边的可变宽度描边宽度画笔和橡皮擦宽度渐变2、AstuteBuddy键盘快捷键面板屏幕实时键快捷方式与工具箱中的所有...Astute Graphics工具一起使用发现隐藏的功能3、VectorFirstAId清理矢量文件将大纲文本转换回可编辑文本更改文字点对齐重新加入路径格式不正确的导入路径4、InkScribe精确的路径创建将本机钢笔工具更上一层楼约束距离首选项将路径拖到适当位置...9、SubScribe创建准确的艺术品圆弧按点工具定向和变换对象轻松悬停在对象上即可轻松解锁和锁定10、DirectPrefs微移距离，角度+引导线下载Astute Manager时免费画角度键盘微动距离...11、Rasterino图像裁剪+编辑交互式图像裁剪修剪空白图像区域重新链接多个嵌入式图像12、Stylism现场效果变得简单单击并拖动功能的实时效果实时预览调整用户定义的样式预设13、ColliderScribe...+尺寸动态形状工具动态角点工具智能除毛刷18、FindReplace即时定位+修改对象根据视觉属性定位或选择对象选择复杂图稿中的对象以进行本机修改进口艺术品，印前和重复性作品的理想选择

    1.1K10

    关于Adobe Photoshop调整选区介绍

    高品质预览：渲染更改的准确预览。此选项可能会影响性能。选择此选项后，在处理图像时，按住鼠标左键（向下滑动）可以查看更高分辨率的预览。取消选择此选项后，即使向下滑动鼠标时，也会显示更低分辨率的预览。...透明度/不透明度：为“视图模式”设置透明度/不透明度。 调整模式 设置“边缘检测”、“调整细线”和“调整边缘画笔工具”所用的边缘调整方法。 颜色识别：为简单背景或对比背景选择此模式。...颜色替换的强度与选区边缘的软化度是成比例的。调整滑块以更改净化量。默认值为 100%（最大强度）。由于此选项更改了像素颜色，因此它需要输出到新图层或文档。...另外，此选项还可以将图像恢复为您在进入“选择并遮住”工作区时，它所应用的原始选区或蒙版。 选择记住设置可存储设置，用于以后的图像。...设置会重新应用于以后的所有图像，如果在“选择并遮住”工作区中重新打开当前图像，这些设置也会重新应用。

    2.5K60

    Capture One 22 Pro for mac(RAW转换和图像编辑工具)v15.4.2.12中文版

    Capture One Pro 22将所有必备工具和高端性能融于一体、使您在一套快捷、灵活且有效的工作流程中捕获、整理、编辑、分享以及打印图像。...图片Capture One 22 Pro for mac(RAW转换和图像编辑工具)Capture One Pro 22功能特色最新的功能和改进注释通过在图像上直接添加手写笔记和绘图，在Capture...分层工作流程所有调整工具现在都与图层兼容，使Capture One成为真正的“以层为中心”的应用程序。...有了这个，我们将推出一个新的，更加动态的工作空间 本地调整已重命名为图层，现在包含在多个工具中abs，使用分层编辑工作流程更容易。图层不透明度通过更改每个图层的不透明度来控制局部调整的影响。...在根据需要对多个工具进行调整后，只需拖动不透明度滑块即可降低图层的整体影响。羽毛面膜和精致面膜使用“羽化蒙版”功能简化了绘制后柔化蒙版边缘的功能。只需拖动滑块以羽化边缘，即可避免重绘蒙版。

    4.8K30

    专业的图像处理工具：Pixelmator Pro Mac下载

    Pixelmator Pro Mac版是一款专业的图像处理工具，具有对RAW图像的卓越支持，并内置了众多效果和高质量的矢量图形，支持psD，TIFF，PNG，TGA等最流行的图像格式， BMP，JPEG...Pixelmator Pro图像处理工具：图片新增功能-使用方便的颜色标签轻松对图层进行颜色编码，使重要对象更容易被发现或为高级插图和设计带来一些额外的组织-通过图层过滤和搜索，找到您正在寻找的图层比以往更简单...-根据图层类型（图像，文本，形状和组），颜色标记或两者过滤图层。-在图层边栏中快速调整图层不透明度和混合模式。-使用剪切蒙版将一个图层的内容剪切到另一个“偶数图层组”或“嵌套图形”的轮廓！...-在使用“颜色调整”，“效果”或“样式”的图层上使用绘画，修饰或整形工具时，所有非破坏性过滤器都将动态更新到图层的新内容并且不会被展平。这一个很大！颜色标签通过为图层提供方便的颜色标记来组织图层。...快速不透明和混合您现在可以在图层边栏中更改图层的不透明度设置和混合模式。

    80030

    「Adobe国际认证」Adobe Photoshop，如何裁剪并拉直照片？

    裁剪工具是非破坏性的，您可以选择保留裁剪的像素以便稍后优化裁剪边界。裁剪工具还提供直观的方法，可让您在裁剪时拉直照片。 对于所有操作，可视化指南都提供了交互式预览。...要循环切换所有选项，请按“O”。 裁剪选项单击“设置”（齿轮）菜单以指定其他裁剪选项。...显示裁剪区域启用此选项以显示裁剪的区域。如果禁用此选项，则仅预览最后的区域。 启用裁剪屏蔽使用裁剪屏蔽将裁剪区域与色调叠加。您可以指定颜色和不透明度。...如果您启用“自动调整不透明度”，那么当您编辑裁剪边界时会降低不透明度。 删除裁剪的像素禁用此选项以应用非破坏性裁剪，并在裁剪边界外部保留像素。非破坏性裁剪不会移去任何像素。...要调整画布的大小，您也可以选择“图像”>“画布大小”。 文末彩蛋教程 更改画布大小 画布大小是图像的完全可编辑区域。“画布大小”命令可让您增大或减小图像的画布大小。

    2.9K10

    【Android 应用开发】Xfermod 图形组合 之 SRC 类 合成模式 ( SRC | SRC_ATOP | 详细解析官方给出的透明度和颜色值计算公式 )

    合成的计算过程 ( 按照区域 和 公式 分析透明度和颜色值 ) : S 区域 ( 源图像素 不透明区域 ) : 该区域的 透明度 与 颜色值 与 源图像一样 ; ① 透明度计算 : 根据公式 \alpha...合成区域描述 : ① 集合 S 表示 源图像素 不透明区域 ; ② 集合 D 表示目标图像像素 不透明区域 ; ③ 集合 R 表示绘制结果的不透明区域 ; ④ 集合 A 代表全集所有区域...( 整个框透明 + 不透明所有区域 ) ; ⑤ 集合 S \cap D 表示 源图像 与 目标图像 不透明区域的交集 ; ⑥ 集合 S \cup D 表示 源图像 与 目标图像 不透明区域的并集...D \cap S 区域 ( 集合交集运算 : 目标图像不透明区域 D , 与 源图像不透明区域 S , 的交集 ) : ( 1 ) 透明度计算 : 根据公式 \alpha_{out} = \...; ④ 集合 A 代表全集所有区域 ( 整个框透明 + 不透明所有区域 ) ; ⑤ 集合 S \cap D 表示 源图像 与 目标图像 不透明区域的交集 ; ⑥ 集合 S \cup D

    3K10

    使用Python给图片添加水印

    能够控制logo图像的透明度将有助于使最终生成的图像看起来更好。因此，最好使用支持图像透明度的PNG文件格式的水印图像。 如果水印文件是JPG/JPEG格式，不要担心。...Python可以为图像添加所需的“透明度”。 虽然PNG文件和JPG文件之间有一些不同，但我们主要关注的是图像的透明度特征。图像透明度基本上是指图像是否可以透过。...如上图2所示，PNG支持透明度（即alpha通道），但JPG没有。 这里需要注意： 1.RGB的值为255表示每种颜色的最大值。将所有三个值设为最大值(255,255,255)基本上是白色。...为了找到所有白色的像素，可以创建一个掩码，其中白色像素=True，否则为False。下面的代码检查图像的每个像素的所有R、G和B值是否等于255。...注意，transparent_watermark[：，：，0]仅返回所有1100×1100像素的第一个元素（即“R”的整数值）的数组。 然后，我们为满足标准的像素赋新值[255,255,255,0]。

    2.3K30

    Capture One 22 Pro for mac(RAW转换和图像编辑工具)

    id=MjU2NjEmXyYyNy4xODcuMjI2LjE1MQ%3D%3D功能特色最新的功能和改进注释通过在图像上直接添加手写笔记和绘图，在Capture One中注释图像。...分层工作流程所有调整工具现在都与图层兼容，使Capture One成为真正的“以层为中心”的应用程序。...有了这个，我们将推出一个新的，更加动态的工作空间 本地调整已重命名为图层，现在包含在多个工具中abs，使用分层编辑工作流程更容易。图层不透明度通过更改每个图层的不透明度来控制局部调整的影响。...在根据需要对多个工具进行调整后，只需拖动不透明度滑块即可降低图层的整体影响。羽毛面膜和精致面膜使用“羽化蒙版”功能简化了绘制后柔化蒙版边缘的功能。只需拖动滑块以羽化边缘，即可避免重绘蒙版。...通过将裁剪存储为导出的PSD文件中的路径，可以将完整图像用于润饰，甚至可以在稍后阶段使用替代裁剪。复制检查器复制检查器确保您不在目录或会话中两次导入相同的文件。

    85920

    【Android 应用开发】Paint 图形组合 Xfermod 之 合成模式表示方法 ( Xfermod 使用步骤 | 透明度 颜色值 公式表示方法 | 老版本表示方法 | 合成区域分块 )

    : 这些方程用于计算 源图像 与 目标图像 合成结果的 对应像素点的 透明度 和 颜色值 ; ---- 老版本的表示方法 老版本的表示方法 : 1.目标图像相关 : [D_a , D_c] , 表示该目标图像的透明度和颜色值属性...; ① 目标图像 指定像素位置 的透明度 : D_a ; ② 目标图像 指定像素位置 的颜色值 : D_c ; 2.源图像相关 : [S_a , S_c] , 表示该源图像的透明度和颜色值属性...; ① 源图像 指定像素位置 的透明度 : S_a ; ② 源图像 指定像素位置 的颜色值 : S_c ; 3.合成结果相关 : [R_a , R_c] , 表示该合成结果图像的透明度和颜色值属性...不透明区域 ; ② 集合 D 表示目标图像像素 不透明区域 ; ③ 集合 R 表示绘制结果的不透明区域 ; ④ 集合 A 代表全集所有区域 ( 整个框透明 + 不透明所有区域 ) ; ⑤...集合 S \cap D 表示 源图像 与 目标图像 不透明区域的交集 ; ⑥ 集合 S \cup D 表示 源图像 与 目标图像 不透明区域的并集 ; 之后的每个模式都要分析上述某几个区域的

    1.6K20

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

    在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候（这里是白色文本置于黑色背景之上），它应该遵循下面的不透明度设置规则： 最重要的内容，白色文本不透明度设置为87% 中等重要的内容，白色文本的不透明度为...60% 被禁用的文本内容，白色文本的不透明度为38% ?...底部容器使用半透明主色的时候，被启用、悬停、长按、按下和拖动时的不同状态。 ? 底部容器使用主色的时候，被启用、悬停、长按、按下和拖动时的不同状态。...禁用状态 所有的被禁用的组件，都使用不透明度为 12% 的白色用来呈现外轮廓和填充色，并使用不透明度为 38% 的白色来显示文本和表层的内容。 ?...轮廓容器：不透明度为12%的白色 标签/图标：不透明度为38%的白色 色彩填充容器：不透明度为12%的白色 相关资源 Sticker sheet 是和 Sketch for Android 这套组件一起使用的

    9.8K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券