透明度&色值表

透明度对应的16进制表
<!--百分比-开头字母-->
<!--100% —FF-->
<!--95% — F2-->
<!--90% — E6-->
<!--85% — D9-->
<!--80% — CC-->
<!--75% — BF-->
<!--70% — B3-->
<!--65% — A6-->
<!--60% — 99-->
<!--55% — 8C-->
<!--50% — 80-->
<!--45% — 73-->
<!--40% — 66-->
<!--35% — 59-->
<!--30% — 4D-->
<!--25% — 40-->
<!--20% — 33-->
<!--15% — 26-->
<!--10% — 1A-->
<!--5% — 0D-->
<!--0% — 00-->

透明度可以保存color资源文件里

<?xml version="1.0" encoding="utf-8"?>
<resources>

<color name="translucent">#00000000</color>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
<color name="dark">#88888888</color>

<!--白色透明度-->
<color name="translucent_white_05">#f2ffffff</color>
<color name="translucent_white_10">#e6ffffff</color>
<color name="translucent_white_15">#d9ffffff</color>
<color name="translucent_white_20">#ccffffff</color>
<color name="translucent_white_25">#bfffffff</color>
<color name="translucent_white_30">#b3ffffff</color>
<color name="translucent_white_35">#a6ffffff</color>
<color name="translucent_white_40">#99ffffff</color>
<color name="translucent_white_45">#8cffffff</color>
<color name="translucent_white_50">#80ffffff</color>
<color name="translucent_white_55">#73ffffff</color>
<color name="translucent_white_60">#66ffffff</color>
<color name="translucent_white_65">#59ffffff</color>
<color name="translucent_white_70">#4dffffff</color>
<color name="translucent_white_75">#40ffffff</color>
<color name="translucent_white_80">#33ffffff</color>
<color name="translucent_white_90">#26ffffff</color>
<color name="translucent_white_95">#0dffffff</color>

<!--黑色透明度-->
<color name="translucent_black_05">#f2000000</color>
<color name="translucent_black_10">#e6000000</color>
<color name="translucent_black_15">#d9000000</color>
<color name="translucent_black_20">#cc000000</color>
<color name="translucent_black_25">#bf000000</color>
<color name="translucent_black_30">#b3000000</color>
<color name="translucent_black_35">#a6000000</color>
<color name="translucent_black_40">#99000000</color>
<color name="translucent_black_45">#8c000000</color>
<color name="translucent_black_50">#80000000</color>
<color name="translucent_black_55">#73000000</color>
<color name="translucent_black_60">#66000000</color>
<color name="translucent_black_65">#59000000</color>
<color name="translucent_black_70">#4d000000</color>
<color name="translucent_black_75">#40000000</color>
<color name="translucent_black_80">#33000000</color>
<color name="translucent_black_90">#26000000</color>
<color name="translucent_black_95">#0d000000</color>
</resources>

转载于:https://my.oschina.net/u/435726/blog/798584

&lt;think&gt;好的,我现在需要帮助用户解决如何在Element UI的el-table中设置表头背景色的透明度。首先,用户之前的问题是关于设置表头背景色,现在他们进一步询问如何设置透明度,这可能涉及到使用CSS的rgba颜色值或者调整透明度属性。 回顾之前的回答,我提到了三种方法:内联样式、CSS穿透和动态回调函数。用户现在提到透明度,可能需要在这些方法中使用带有透明度的颜色值,比如rgba或者hsla。另外,用户提供的引用内容中提到了设置背景颜色为透明,这可能涉及到将背景色设置为transparent或者使用rgba的alpha通道。 首先,我需要确认用户的需求是让表头背景色半透明,而不是完全透明。完全透明的话可以直接用transparent,但如果是半透明则需要使用rgba。比如rgba(255, 255, 255, 0.5)这样的格式,其中最后一个参数是透明度。 接下来,我需要考虑如何将这些颜色应用到之前的三种方法中。例如,在内联样式中,用户可以将backgroundColor的值改为rgba格式。在CSS穿透的方法中,同样需要使用rgba,并且可能需要!important来覆盖默认样式。动态回调函数的方法中,返回的样式对象中的backgroundColor也应该使用rgba。 另外,用户提供的引用中有使用background-color: transparent的例子,这可能适用于完全透明的情况。但用户现在的问题是关于透明度,可能需要调整alpha值。因此,在回答中需要区分完全透明和半透明的情况,并给出相应的解决方案。 还需要注意样式的优先级问题,特别是在使用CSS穿透时,可能需要!important来确保自定义样式覆盖Element UI的默认样式。同时,考虑到不同浏览器的兼容性,使用rgba是比较安全的方法,因为现代浏览器都支持。 此外,用户可能遇到的问题包括样式不生效,这可能是因为其他样式覆盖或者选择器的问题。因此,在回答中需要强调正确使用CSS选择器,并检查是否有其他样式干扰。 最后,需要确保示例代码正确,并且用户能够轻松复制和调整。可能还需要提到如何结合斑马纹效果或其他样式设置,确保透明度不会影响其他部分的显示。&lt;/think&gt;根据Element-UI特性和CSS样式控制原理,设置表头背景透明度可通过以下3种方式实现: ### 方法一:RGBA颜色值(推荐方案) ```html &lt;el-table :header-cell-style=&quot;{ backgroundColor: &#39;rgba(248,248,248,0.5)&#39;, // 透明度0.5 color: &#39;#333&#39; }&quot;&gt; &lt;/el-table&gt; ``` *原理*:通过CSS3的RGBA颜色模式实现透明效果,第四个参数控制透明度(0-1)[^1] ### 方法二:CSS穿透+透明通道 ```css /* 全局透明度 */ .el-table /deep/ .el-table__header th { background-color: rgba(238,241,246,0.8) !important; /* 80%不透明度 */ } /* 局部透明度(限定容器) */ .container &gt;&gt;&gt; .el-table__header th { background-color: hsla(220, 100%, 97%, 0.6); /* HSL+透明度 */ } ``` *特性*:支持CSS预处理器变量,可结合主题系统使用[^2] ### 方法三:透明覆盖层(高级技巧) ```css .el-table__header::after { content: &#39;&#39;; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); pointer-events: none; /* 确保不影响交互 */ } ``` *适用场景*:需要叠加纹理或渐变透明效果时使用 ### 透明度设置对照表 | 透明度值 | RGBA示例 | 效果描述 | |---------|----------|---------| | 0 | rgba(0,0,0,0) | 完全透明 | | 0.3 | rgba(255,255,255,0.7) | 半透明 | | 0.5 | rgba(100,150,200,0.5) | 中度透明 | | 0.8 | rgba(238,241,246,0.2) | 轻微透明 | | 1 | rgba(0,0,0,1) | 完全不透明 | ### 常见问题解决方案 1. **透明度不生效**: - 检查是否被默认样式覆盖,添加`!important` - 确认父容器没有设置不透明背景 - 使用Chrome开发者工具检查最终样式 2. **斑马纹叠加效果**: ```css .el-table--striped /deep/ .el-table__body tr.el-table__row--striped td { background: rgba(245,247,250,0.6); /* 条纹行透明度 */ } ``` 3. **暗黑模式适配**: ```css @media (prefers-color-scheme: dark) { .el-table__header th { background-color: rgba(0,0,0,0.7) !important; } } ``` ### 实际效果示例 ![透明度渐变效果](https://via.placeholder.com/600x200/FFFFFF/FFFFFF?text=透明表示例图) (注:此处应为实际透明效果演示图)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值