css如何設(shè)置背景透明

發(fā)布時(shí)間：2021-03-16 09:42:24 來源：億速云閱讀：419 作者：小新欄目：web開發(fā)

小編給大家分享一下css如何設(shè)置背景透明，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css設(shè)置背景透明的方法：首先新建文件，在div寫上對(duì)應(yīng)的樣式；然后為div添加opacity樣式，透明效果實(shí)現(xiàn)了，父div的背景圖可以投射出來。

css設(shè)置透明背景的方法：

1、先寫些測(cè)試代碼，測(cè)試HTML很簡單，就是二個(gè)div，一個(gè)嵌套在另一個(gè)里面，代碼如圖。

css如何設(shè)置背景透明

2、然后為二個(gè)div寫上對(duì)應(yīng)的樣式，如圖，都是一些比較基礎(chǔ)的css代碼，為了顯示透明效果，我們?cè)跇邮綖閜1的div里，添加了一張背景圖。

css如何設(shè)置背景透明

3、先看下還沒添加透明效果的頁面。

css如何設(shè)置背景透明

4、要添加透明效果，我們可以為div添加opacity樣式，這是css2的做法，代碼如圖，添加了一個(gè)樣式規(guī)則.opacity，并在p2 div里加上這個(gè)樣式名

css如何設(shè)置背景透明

5、看下設(shè)置了透明效果的頁面。

透明效果是實(shí)現(xiàn)了，父div的背景圖可以投射出來。但有一個(gè)缺陷，就是div上的文字變模糊了，因?yàn)橐灿辛送该餍Ч?/p>

css如何設(shè)置背景透明

看完了這篇文章，相信你對(duì)“css如何設(shè)置背景透明”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

猜你喜歡