用CSS3怎么做带半透明背景效果的文�
Admin 2022-06-14 群英技术资�
最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示:
需�.png
看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度�
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背景透明,文字也透明</title> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 400px; background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .demo { position: absolute; width: 260px; height: 60px; top: 260px; line-height: 60px; text-align: center; background-color: black; opacity: 0.5; } .demo p { color: #FFF; font-size: 18px; font-weight: 600; } </style> </head> <body> <div class="container"> <div class="demo"> <p>2018世界杯已开幕:10�</p> </div> </div> </body> </html>
效果如下�
背景透明,文字也透明.png
这样貌似也满足了需求,不过并不完美,设置opacity之后,整个元素都半透明了,造成文字显得模糊,这样的解决方式并不可取�
其实实现透明的CSS方法并不只有设置opacity一种方式。还有另外两种:
在这里我采用了设置rgba的方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背景透明,文字不透明</title> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 400px; background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } .demo { position: absolute; width: 260px; height: 60px; top: 260px; line-height: 60px; text-align: center; background-color: rgba(0,0,0,0.5); } .demo p { color: #FFF; font-size: 18px; font-weight: 600; } </style> </head> <body> <div class="container"> <div class="demo"> <p>2018世界杯已开幕:10�</p> </div> </div> </body> </html>
效果如下�
背景透明,文字不透明.png
这样设置之后,文字显得清晰了许多�
小结
其实要实现这个需求,并不只有这一种思路,还可以用两个DIV放在同一个位置,一个是半透明的背景DIV,一个是文字DIV,一样可以解决问题,但是需要写绝对定位或负margin,并出现空内容的DIV,这种方法在有些场景下会显得略微复杂,如下示例所示,所以在实际需求场景中还是要具体问题具体分析�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
本篇文章给大家带来了关于css设计模式的相关知识,其中包括OOCSS、BEM、SMACSS、ITCSS以及ACSS的相关问题,希望对大家有帮助�
ss文字装饰text-decoration怎样使用?文字装饰text-decoration的用法还是比较简单的,而且也很实用,因此这篇文章就给大家分享一下文字装饰text-decoration和文字强调text-emphasis的使用,感兴趣的朋友就继续往下看吧�
我们在制作HTML页面时,经常会遇到浮动问题,如果当子元素浮动时,不清除浮动就会导致后面的元素排版乱序。那么都有什么方法能够清除浮动呢�
这篇文章给大家分享的是CSS3中如何将元素设置为隐藏。小编觉得挺实用的,因此分享给大家做个参考,文中介绍了四种方法,示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
代码�1、“transform:rotateY(角度)”,可设置元素沿Y轴翻转样式;2、“transform:rotateX(角度)”,可设置元素沿X轴翻转样式;3、“transform:rotateZ(角度)”,可设置元素沿Z轴翻转样式�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078