您好,登錄后才能下訂單哦!
小編給大家分享一下css如何實現透明框中的文本,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
源代碼是何等的:
<!DOCTYPE html> <html> <head> <style> div.background { width: 400px; height: 266px; bac公斤round: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border: 1px solid black; } div.transbox { width: 338px; height: 204px; margin:30px; bac公斤round-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p { margin: 30px 40px; } </style> </head> <body> <div class="background"> <div class="transbox"> <p> This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html>
起首,我們建設一個 div 元素 (class="background"),它有固定的高度和寬度、靠山圖象,以及邊框。從此我們在第一個 div 內構建稍小的 div (class="transbox")。"transbox" div 有固定的寬度、靠山色和邊框 - 并且它是透亮的。在透明 div 內部,我們在 p 元素中退出了一些文本。
以上是“css如何實現透明框中的文本”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。