這篇文章主要介紹了關於css實現背景半透明文字不透明的效果示例,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
本文介紹了css實現背景半透明文字不透明的效果範例,分享給大家,如下:
效果如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html{ background: #6a8db1; } .aside{ background-color:rgba(244,251,251,0.47); border: 1px solid #FFFFFF; width: 200px; text-align: center; color: #FFFFFF; } .aside p{ height: 55px; border-bottom: 1px solid #FFFFFF; line-height: 55px; } .aside p font{ font-weight: 800; } .aside p span{ font-weight: 800; margin-left:18px; } </style> </head> <body> <p class="aside"> <p> <font>留置室1 </font > <span>10人</span> </p> <p> <font>留置室1 </font > <span>4人</span> </p> <p> <font>留置室1 </font > <span>12人</span> </p> <p> <font>留置室1 </font > <span>6人</span> </p> <p> <font>留置室1 </font > <span>8人</span> </p> </p> </body> </html>
顏色可依調色盤自行調色
以上就是本篇文章的全部內容了,更多相關內容請關注PHP中文網。
相關推薦:
以上是css實作背景半透明文字不透明的效果範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!