- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
为什么两个堆叠的半透明盒子的最终颜色取决于顺序?
我怎样才能在两种情况下得到相同的颜色?
.a {
background-color: rgba(255, 0, 0, 0.5)
}
.b {
background-color: rgba(0, 0, 255, 0.5)
}
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
最佳答案
只是因为在这两种情况下,由于top 层的不透明度如何影响bottom 层的颜色,颜色组合并不相同。
对于第一种情况,您会在顶层看到 50% 的蓝色 和 50% 的透明。通过透明部分,你可以看到底层有 50% 的红色(所以我们总共只能看到 25% 的红色)。第二种情况的逻辑相同(50% 的红色 和25% 的蓝色);因此你会看到不同的颜色,因为对于这两种情况,我们没有相同的比例。
为避免这种情况,您需要使两种颜色的比例相同。
下面是一个例子,可以更好地说明和展示我们如何获得相同的颜色:
在顶层(内部跨度)我们有 0.25
的不透明度(所以我们有 25% 的第一种颜色和 75% 的透明)然后是底层(外部跨度)我们有 0.333
不透明度(所以我们有 75% 的 1/3 = 25% 的颜色,其余的是透明的)。我们在两层中的比例相同 (25%),因此即使我们颠倒层的顺序,我们也会看到相同的颜色。
.a {
background-color: rgba(255, 0, 0, 0.333)
}
.b {
background-color: rgba(0, 0, 255, 0.333)
}
.a > .b {
background-color: rgba(0, 0, 255, 0.25)
}
.b > .a {
background-color: rgba(255, 0, 0, 0.25)
}
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
附带说明一下,白色背景也会影响颜色的渲染。其比例为 50%,将得出 100% 的逻辑结果(25% + 25% + 50%)。
您可能还会注意到,如果顶层的不透明度大于 0.5
,那么我们的两种颜色将不可能具有相同的比例,因为第一个会有更多超过 50%,第二个将保持低于 50%:
.a {
background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}
.b {
background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}
.a > .b {
background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
常见的简单情况是当顶层具有opacity:1
时,顶层颜色的比例为 100%;因此它是一种不透明颜色。
为了更准确和精确的解释,这里是用于计算我们在两层组合后看到的颜色的公式 ref :
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF 是我们的最终颜色。 ColorT/ColorB分别是顶部和底部的颜色。 opacityT/opacityB分别是为每种颜色定义的顶部和底部不透明度:
因子
由公式 OpacityT + OpacityB*(1 - OpacityT)
定义。
很明显,如果我们切换两层,factor
不会改变(它将保持不变)但我们可以清楚地看到每种颜色的比例都会改变,因为我们不具有相同的乘数。
对于我们的初始情况,两个不透明度都是 0.5
所以我们将有:
ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor
如上文所述,顶部颜色的比例为 50% (0.5
),底部颜色的比例为 25% (0.5*(1-0.5)
) 所以切换图层也会切换这些比例;因此我们看到了不同的最终颜色。
现在,如果我们考虑第二个例子,我们将得到:
ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor
在这种情况下,我们有 0.25 = 0.333*(1 - 0.25)
因此切换两层将没有效果;因此颜色将保持不变。
我们还可以清楚地识别微不足道的情况:
不透明度:0
时,公式等于ColorF = ColorB
opacity:1
时,公式等于ColorF = ColorT
关于html - 堆叠的半透明盒子的颜色取决于订单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50574524/
我尝试编写一个有多个链接表的解决方案。现在我有另一个问题: 我想将返回的行数限制为 1000。但我想显示 ID 1-1000,下一页 1001-2000。ID可以以不规则的顺序存储在数据库中(ID 1
我已经尝试申请 Drupal 商业优惠券大约 2 天了。我已经负责验证优惠券,但目前在尝试兑换优惠券时遇到了困难。 所以在我的回调函数中,我正在调用: my_module_coupons_coupon
[问]请帮忙,比如有一个数据 tbl_user | Id | name | | 1 | Bayu | | 2 | Indra | | 3 | Rangga | tbl_data | Id | user
我在 Android 应用程序中使用的一些 Parcelable 自定义类遇到了问题,我设法以一种非常奇怪的方式解决了这个问题。 仅在少数特定情况下,我在读取 parcelable 时发生了崩溃(这让
我一直在做一个项目,我需要在数据库中存储订单列表(在本例中为食品)。 我曾尝试四处寻找存储此类列表的最佳方式,但找不到任何方法。 目前,我将数据存储在 phpMyAdmin/SQL 中,订单存储为要打
目录 1、背景简介 2、订单业务 1、订单体系 2、流程管理 2
HBase案例:客户/订单 假设HBase 用于存储客户和订单信息。有两种核心记录类型被摄取:客户记录类型和订单记录类型。 客户记录类型将包含您通常期望的所有内容: 客户编号 客户名称
C-x C-b 显示缓冲区列表。首先是自然顺序,最近使用的缓冲区在顶部,隐藏的缓冲区在底部。 在那里,我现在可以按名称、大小、模式和文件对缓冲区进行排序。但是一旦我点击了这样的选项,我就无法回到原来的
我为 Woocommerce 添加了一个新的排序选项,它将按最低价格排序。我所有的价格都存储在一个自定义属性中,连同一些其他序列化数据。我想要的是有一个回调函数来反序列化这些数据,检查最低价格并按该价
想象一下我有一张 table : ID field1 field2 --- ------- ------ 111 1 11113 112
Kotlin forEach 是按数组的实际顺序遍历数组还是有时可能按其他顺序遍历数组?我的意思是这是否总是打印 1,2,3,...9 或者它可能会打印类似 1,5,3,4,... val numbe
我在 woocommerce 3+ 上创建了 html 电子邮件模板,但我无法通过订单 ID 获取订单项。我试过这个,但对我不起作用。 get_items(); foreach
我对将我自己的内部广告与 AdMob 的广告一起展示并使用按重要性顺序设置 eCPM 值的问题感到有些困惑。 我目前只与 AdMobs 的网络一起转换一个自家广告。 从常见问题解答和 AdMob 帮助
我正在尝试构建一个电子商务数据库,但我不了解订单,产品和客户之间的关系。 有很多数据库示例,但是它们太复杂了。是否有关于可能的表和关系的更简单的解释或示例。 谢谢。 最佳答案 如果客户可以拥有多个订单
我必须对电子商务系统进行一些更改以添加一些附加信息,并希望借此机会进行一些改进并使其更加灵活。当客户下订单时,我们必须为每个订购的商品存储几项信息;例如,产品价格、运费、征收的税款、所做的任何调整。
我正在尝试新的 ASP.NET bundle 功能,但似乎无法让我的自定义排序正常工作。这是我的 JS 文件: bootstrap.js bootstrap.min.js jquery-1.7.2.i
我正在尝试以下代码,并希望获取日期之间的所有订单并打印它们 $orders = $my_query->posts; $order = wc_get_order( $order_id ); $or
我有 ORMLite 数据库对象,它有一个字段: @ForeignCollectionField(eager = true) public ForeignCollection blocks; 现在,当
除了调用 event_list_attendees 并寻呼与会者以尝试找到正确的用户匹配之外,是否有其他方法可以获取门票/订单的用户条形码 ID?这种方法会增加 eventbrite 服务器的负担,并
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 5 年前。 我制作了订单食品应用程序。当我单
我是一名优秀的程序员,十分优秀!