在白色背景上用灰色文字是“弱化”的好方法,但是在彩色背景上看起来就没那么好了。想要营造出弱一点的层次感,本质上是要让文字颜色更接近背景色。 你可能会认为,实现这一点最简单的方法是使用透明的白色文本。虽然这确实减少了对比度,但往往会导致文本看起来暗淡,有时甚至看起来像是被禁用了。 更糟的是,这种方法用在有纹理的图案上时,纹理会透过文本显示出来。 更好的方法是根据背景色手动挑选一个新颜色:选择一个色调相同的颜色,并调整饱和度和亮度,直到它看起来合适。 <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_133CE61C-2EE6-4FDE-BB73-6501AC348354/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(299px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_133CE61C-2EE6-4FDE-BB73-6501AC348354/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="299"> <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_3F40AB89-DB41-4795-A319-6A0B6E7E60F0/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(161px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_3F40AB89-DB41-4795-A319-6A0B6E7E60F0/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="161"> <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_9226A210-5F71-4017-B2F0-C07D983D184F/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(122px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_9226A210-5F71-4017-B2F0-C07D983D184F/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="122"> <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_E30C1602-4047-4589-9545-CD9D48D50D53/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(161px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_E30C1602-4047-4589-9545-CD9D48D50D53/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="161">