在 CSS 中应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 来实现透明度?

2024-03-19

你应该使用rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0)CSS 的透明度?

各自的优点和缺点是什么?


最后一个参数为rgba()函数是“alpha”或“opacity”参数。如果您将其设置为0它将意味着“完全透明”,前三个参数(red, green, and blue通道)并不重要,因为无论如何你都看不到颜色。

考虑到这一点,我会选择rgba(0, 0, 0, 0)因为:

  1. 打字少了,
  2. 它会在 CSS 文件中保留一些额外的字节,并且
  3. 如果 alpha 值更改为不需要的值,您将看到一个明显的问题。

You could避免rgba完全模型并使用transparent关键字代替,根据w3.org http://www.w3.org/TR/css3-color/#transparent,相当于“透明黑色”并且应该计算为rgba(0, 0, 0, 0)。例如:

h1 {
    background-color: transparent;
}

这又为您节省了几个字节,同时您使用透明度的意图很明显(如果有人不熟悉 RGBA)。

从 CSS3 开始,您可以使用transparent任何接受颜色的 CSS 属性的关键字。

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

在 CSS 中应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 来实现透明度? 的相关文章

  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • 我可以在不同浏览器中获得一致的 CSS 颜色吗?

    我正在测试一个新网站 并且我有一个 div background color bbf6bb 这对我来说似乎无害 然而 在我的 MacBook Pro 上 Firefox 3 6 与 Safari 4 中的颜色看起来非常不同 在 Safari
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • Firefox CSS 大纲错误?

    在 Chrome 和 IE9 上 我指定的 CSS 轮廓完全符合我的要求 并充当我正在设计的元素周围的第二个边框 但在 Firefox 上 轮廓会向外扩展 以便包含我生成的 after 伪元素以及主元素 这是一个错误 还是预期的 有什么好的
  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • 无法从代码隐藏更改 CSSClass

    这一定是世界上最简单的事情 但它就是行不通 我有一个外部 div 我想对其应用一个类以使其显示样式 none 以便隐藏其中的所有内容 它实际上是一个 asp panel 元素 所以我假设我可以在后面的代码中设置 control CssCla
  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此
  • css 字体 twitter 像关闭按钮一样,我错过了什么?

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial
  • 更改 CSS 网格中的列顺序

    我正在研究 CSS 网格 当我在桌面尺寸上查看它时 min width 769px 我有单行三列 像这样的事情 col 1 col 2 col 3 我可以使用 css grid 移动列 以便我可以在移动布局上执行类似以下操作吗 col 1
  • 更改特定字符串的颜色

    有谁知道如果将特定单词输入文本区域 我如何更改它的颜色 例如 如果用户输入 你好我的朋友 它会动态地将 你好 更改为绿色 在google上花了很多时间 找不到任何相关的东西 谢谢 textareas 的设计目的不是选择性着色
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr

随机推荐