Cách opacity ảnh không text.

Dưới đây mình xin hướng dẫn mọi người cách làm opacity ảnh không text. Tức là chỉ làm mờ ảnh nhưng không làm mờ text.

Bạn Xem hình để hiểu rõ hơn :

Hai vùng mình đánh dấu là được Opacity làm mờ để làm nổi chữ lên. Nhưng làm sao để chữ trong vùng đó không mờ. Thuộc tính css dưới sẽ giúp bạn làm như vậy :

background-color: rgba(0, 0, 0, 0.2); 

Ở ví dụ trên :

rgb(0,0,0):  là mã màu
0.2 : là độ mờ opacity. Mờ nhất là 0.1, màu không mờ là 1.

Tham khảo bảng các mã màu khác :

STT	C	M	Y	K	R	G	B	HEX-16
1	0	100	100	45	139	0	22	8B0016
2	0	100	100	25	178	0	31	B2001F
3	0	100	100	15	197	0	35	C50023
4	0	100	100	0	223	0	41	DF0029
5	0	85	70	0	229	70	70	E54646
6	0	65	50	0	238	124	107	EE7C6B
7	0	45	30	0	245	168	154	F5A89A
8	0	20	10	0	252	218	213	FCDAD5
9	0	90	80	45	142	30	32	8E1E20
10	0	90	80	25	182	41	43	B6292B
11	0	90	80	15	200	46	49	C82E31
12	0	90	80	0	223	53	57	E33539
13	0	70	65	0	235	113	83	EB7153
14	0	55	50	0	241	147	115	F19373
15	0	40	35	0	246	178	151	F6B297
16	0	20	20	0	252	217	196	FCD9C4
17	0	60	100	45	148	83	5	945305
18	0	60	100	25	189	107	9	BD6B09
19	0	60	100	15	208	119	11	D0770B
20	0	60	100	0	236	135	14	EC870E
21	0	50	80	0	240	156	66	F09C42
22	0	40	60	0	245	177	109	F5B16D
23	0	25	40	0	250	206	156	FACE9C
24	0	15	20	0	253	226	202	FDE2CA
25	0	40	100	45	151	109	0	976D00
26	0	40	100	25	193	140	0	C18C00
27	0	40	100	15	213	155	0	D59B00
28	0	40	100	0	241	175	0	F1AF00
29	0	30	80	0	243	194	70	F3C246
30	0	25	60	0	249	204	118	F9CC76
31	0	15	40	0	252	224	166	FCE0A6
32	0	10	20	0	254	235	208	FEEBD0
33	0	0	100	45	156	153	0	9C9900
34	0	0	100	25	199	195	0	C7C300
35	0	0	100	15	220	216	0	DCD800
36	0	0	100	0	249	244	0	F9F400
37	0	0	80	0	252	245	76	FCF54C
38	0	0	60	0	254	248	134	FEF889
39	0	0	40	0	255	250	179	FFFAB3
40	0	0	25	0	255	251	209	FFFBD1
41	60	0	100	45	54	117	23	367517
42	60	0	100	25	72	150	32	489620
43	60	0	100	15	80	166	37	50A625
44	60	0	100	0	91	189	43	5BBD2B
45	50	0	80	0	131	199	93	83C75D
46	35	0	60	0	175	215	136	AFD788
47	25	0	40	0	200	226	177	C8E2B1
48	12	0	20	0	230	241	216	E6F1D8
49	100	0	90	45	0	98	65	006241
50	100	0	90	25	0	127	84	007F54
51	100	0	90	15	0	140	94	008C5E
52	100	0	90	0	0	160	107	00A06B
53	80	0	75	0	0	174	114	00AE72
54	60	0	55	0	103	191	127	67BF7F
55	45	0	35	0	152	208	185	98D0B9
56	25	0	20	0	201	228	214	C9E4D6
57	100	0	40	45	0	103	107	00676B
58	100	0	40	25	0	132	137	008489
59	100	0	40	15	0	146	152	009298
60	100	0	40	0	0	166	173	00A6AD
61	80	0	30	0	0	178	191	00B2BF
62	60	0	25	0	110	195	201	6EC3C9
63	45	0	20	0	153	209	211	99D1D3
64	25	0	10	0	202	229	232	CAE5E8
65	100	60	0	45	16	54	103	103667
66	100	60	0	25	24	71	133	184785
67	100	60	0	15	27	79	147	1B4F93
68	100	60	0	0	32	90	167	205AA7
69	85	50	0	0	66	110	180	426EB4
70	65	40	0	0	115	136	193	7388C1
71	50	25	0	0	148	170	214	94AAD6
72	30	15	0	0	191	202	230	BFCAE6
73	100	90	0	45	33	21	81	211551
74	100	90	0	25	45	30	105	2D1E69
75	100	90	0	15	50	34	117	322275
76	100	90	0	0	58	40	133	3A2885
77	85	80	0	0	81	31	144	511F90
78	75	65	0	0	99	91	162	635BA2
79	60	55	0	0	130	115	176	8273B0
80	45	40	0	0	160	149	196	A095C4
81	80	100	0	45	56	4	75	38044B
82	80	100	0	25	73	7	97	490761
83	80	100	0	15	82	9	108	52096C
84	80	100	0	0	93	12	123	5D0C7B
85	65	85	0	0	121	55	139	79378B
86	55	65	0	0	140	99	164	8C63A4
87	40	50	0	0	170	135	184	AA87B8
88	25	30	0	0	201	181	212	C9B5D4
89	40	100	0	45	100	0	75	64004B
90	40	100	0	25	120	0	98	780062
91	40	100	0	15	143	0	109	8F006D
92	40	100	0	0	162	0	124	A2007C
93	35	80	0	0	143	0	109	AF4A92
94	25	60	0	0	197	124	172	C57CAC
95	20	40	0	0	210	166	199	D2A6C7
96	10	20	0	0	232	211	227	E8D3E3
97	0	0	0	10	236	236	236	ECECEC
98	0	0	0	20	215	215	215	D7D7D7
99	0	0	0	30	194	194	194	C2C2C2
100	0	0	0	35	183	183	183	B7B7B7
101	0	0	0	45	160	160	160	A0A0A0
102	0	0	0	55	137	137	137	898989
103	0	0	0	65	112	112	112	707070
104	0	0	0	75	85	85	85	555555
105	0	0	0	85	54	54	54	363636
106	0	0	0	100	0	0	0	000000