Android设置颜色背景透明度的两种写法

今天UI根据需求设计一张图,其中有一个知识点是给某个控件的背景颜色设置不透明度为10%,至于设置透明度以前也写过,知识点很简单,不过以前用的都是套人家写的方式,也不知所以然,具体逻辑不是很清晰,今天晚上回来总结一下:
例如:现在有个需求:设置LinearLayout背景颜色为#4ab9ff,透明度为10%
方式一:直接在xml中设置
我们可能有时会发现Android的十六进制代码有时为6位,有时为8位,这两种表达方式有区别吗? 有,我们通常用的都是6位,也称RGB模式,RGB分别代表红色,绿色,蓝色,也称三基色,这三种颜色每一种颜色都可以用一个十六进制说明每个颜色的范围是00–FF,所有正常是6位,而8位呢?前两位代表透明度,也是按照十六进制表示,范围同样是00-FF(10进制为0-255),后六位表示颜色,仍然是RGB模式,通常前两位不写,默认代表不透明为FF,那么问题来了,10%的透明度用16进制应该怎么表示:

  1. 10%转换成10进制

    10%*255=25.5(四舍五入26)

  2. 26转化为16进制

    26----1A(上1与余10,哈哈,这个不讲了,大家都会)

此时我们得到了10%的透明度十六进制,为1A,和刚才需求给我们的背景颜色组合,组成8位的十六进制代码为#1A4ab9ff,在xml里面设置就行了(总结当颜色需要透明度,我们需要拼一个8位的十六进制代码,前两位代表透明度),所以我们要那么此时我们这个需求可以这样写:

<LinearLayout
        android:id="@+id/ll_background"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#4ab9ff"
        android:orientation="vertical"
      >
    </LinearLayout>

此时,有的同学问了,难道每次需要颜色的透明度都要算吗?不用,上一个我是算给大家看看由来,下面是一个透明度和十六进制转换表,需要自取:
100% — FF
99% —- FC
98% —- FA
97% —- F7
96% —- F5
95% —- F2
94% —- F0
93% —- ED
92% —- EB
91% —- E8
90% —- E6
89% —- E3
88% —- E0
87% —- DE
86% —- DB
85% —- D9
84% —- D6
83% —- D4
82% —- D1
81% —- CF
80% —- CC
79% —- C9
78% —- C7
77% —- C4
76% —- C2
75% —- BF
74% —- BD
73% —- BA
72% —- B8
71% —- B5
70% —- B3
69% —- B0
68% —- AD
67% —- AB
66% —- A8
65% —- A6
64% —- A3
63% —- A1
62% —- 9E
61% —- 9C
60% —- 99
59% —- 96
58% —- 94
57% —- 91
56% —- 8F
55% —- 8C
54% —- 8A
53% —- 87
52% —- 85
51% —- 82
50% —- 80
49% —- 7D
48% —- 7A
47% —- 78
46% —- 75
45% —- 73
44% —- 70
43% —- 6E
42% —- 6B
41% —- 69
40% —- 66
39% —- 63
38% —- 61
37% —- 5E
36% —- 5C
35% —- 59
34% —- 57
33% —- 54
32% —- 52
31% —- 4F
30% —- 4D
29% —- 4A
28% —- 47
27% —- 45
26% —- 42
25% —- 40
24% —- 3D
23% —- 3B
22% —- 38
21% —- 36
20% —- 33
19% —- 30
18% —- 2E
17% —- 2B
16% —- 29
15% —- 26
14% —- 24
13% —- 21
12% —- 1F
11% —- 1C
10% —- 1A
9% —- 17
8% —- 14
7% —- 12
6% —- 0F
5% —- 0D
4% —- 0A
3% —- 08
2% —- 05
1% —- 03
0% —- 00

方法二:代码设置
1.拿到要设置控件的Id
LinearLayout mLlBackground=findViewById(R.id.ll_background);
2.设置背景透明度
mLlBackground.getBackground().setAlpha(25);//因为我们要的10% 这个参数范围为0-255,由于从0开始,所以取值为25。
注意:使用getBackground().setAlpha()这个方法的前提必须设置的那个控件要设置背景颜色,不然会报错, 会什么会报错呢,因为这句话作用就是设置背景颜色透明度,你都没有颜色了,如何设置透明度呢。

如有错误之处,希望大家及时指出,共同进步!

<think>我们参考了用户提供的两个引用,其中提到了两种设置背景颜色透明度的方法:opacity和rgba。用户的问题:在使用CSS设置背景颜色后,如何调整该背景颜色透明度。注意:用户已经设置背景颜色,现在要调整这个背景颜色透明度两种方法:方法一:使用opacity属性。但注意,opacity会影响整个元素(包括子元素)的透明度。方法二:使用rgba颜色值。这种方法只设置背景颜色透明度,不会影响子元素。根据用户引用[1]和[2]的内容,我们可以详细说明这两种方法。另外,用户引用[2]还提到一个在线工具,用于将十六进制颜色转换为rgba,我们可以提及这一点。回答结构:1.介绍问题背景。2.方法一:使用opacity,并说明其优缺点(会同时影响子元素)。3.方法二:使用rgba,并说明其优点(只影响背景颜色,不影响子元素)。4.给出示例代码和效果说明。5.推荐使用rgba方法(因为通常我们只想改变背景透明度)。6.如果用户之前使用的是十六进制颜色,如何转换为rgba(可以使用在线工具,或者手动计算)。注意:用户可能已经设置背景颜色,比如使用background-color:#ff0000;或者background-color:red;现在要调整透明度。对于方法二,我们需要将颜色转换为rgba格式。例如,红色#ff0000转换为rgba(255,0,0,0.5)表示半透明。我们还可以提供一个小技巧:如果使用十六进制颜色,并且想要透明度,可以使用8位十六进制,如#ff000080(最后两位表示透明度),但注意浏览器兼容性,目前主流浏览器都支持。因此,我们可以提供三种方法(实际上两种主要方法,其中rgba方法可以用两种写法):1.opacity2.rgba()函数3.8位十六进制颜色(带透明度通道)但根据引用[1]和[2],重点介绍前两种,第三种可以提一下。最后,根据用户的问题,他可能已经设置背景颜色,所以我们要说明如何修改现有的背景颜色设置。示例步骤:-如果原来使用的是颜色名称或十六进制,可以转换为rgba。-如果原来已经使用了rgba,则直接修改其中的alpha值。生成相关问题:1.CSS中opacity和rgba有什么区别?2.如何将十六进制颜色转换为rgba?3.CSS中如何设置元素的背景图片透明度?4.如何让背景透明但文字不透明?5.CSS中除了rgba还有什么方式可以设置背景透明?</think>### CSS设置背景颜色透明度详解 在CSS中设置背景颜色后调整透明度两种主要方法,各有特点: #### 方法一:使用RGBA颜色值(推荐)✅ ```css .element { background-color: rgba(红色值, 绿色值, 蓝色值, 透明度); } ``` **特点**: - 只改变背景透明度,不影响内容(文字/子元素) - 透明度范围:0.0(全透明)→1.0(不透明) - 兼容所有现代浏览器 **示例**: ```css /* 半透明红色背景 */ .box { background-color: rgba(255, 0, 0, 0.5); color: white; /* 文字保持不透明 */ padding: 20px; } ``` **颜色转换工具**: - 十六进制转RGBA:[Hex to RGBA Converter](https://rgbacolorpicker.com/hex-to-rgba) - 例如 `#ff0000` → `rgba(255, 0, 0, 0.5)` #### 方法二:使用opacity属性⚠️ ```css .element { opacity: 0.5; } ``` **特点**: - 改变整个元素的透明度(包括所有子元素) - 透明度范围同RGBA(0.0-1.0) - 内容会跟随背景一起变透明 **示例**: ```css /* 整个元素半透明 */ .box { background-color: #ff0000; opacity: 0.5; /* 文字也会变半透明 */ color: white; } ``` #### 方法三:HSLA颜色模式(替代方案) ```css .element { background-color: hsla(色调, 饱和度%, 亮度%, 透明度); } ``` **示例**: ```css /* 蓝色半透明背景 */ .box { background-color: hsla(240, 100%, 50%, 0.3); } ``` #### 透明度效果对比表 | 方法 | 影响范围 | 内容透明度 | 使用场景 | |------|----------|------------|----------| | **RGBA** | 仅背景 | 不受影响 | 文字/图标需要保持清晰时 | | **Opacity** | 整个元素 | 一起透明 | 需要整体淡出效果时 | | **HSLA** | 仅背景 | 不受影响 | 需要色相调整时 | #### 实际应用示例 ```html <div class="card transparent-bg"> <h3>标题保持不透明</h3> <p>内容文字也保持清晰可见</p> </div> <style> .transparent-bg { background: rgba(33, 150, 243, 0.7); /* 半透明蓝色 */ border-radius: 8px; padding: 20px; color: #fff; /* 可选阴影增强层次 */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } </style> ``` > **关键选择原则**:需要保持内容清晰时使用`rgba()`或`hsla()`;需要整体透明效果时使用`opacity`[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值