css實現背景半透明文字不透明的效果樣本

來源:互聯網
上載者:User
這篇文章主要介紹了關於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>

顏色可根據調色盤自行調色

以上就是本篇文章的全部內容了,更多相關內容請關注topic.alibabacloud.com。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。