正文

html半透明顏色代碼（html白色半透明顏色代碼）

發(fā)布時間：2023-04-06 12:15:59 稿源：創(chuàng)意嶺閱讀： 80

大家好！今天讓小編來大家介紹下關(guān)于html半透明顏色代碼的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、請問各位html大神，如何將如圖所示的導(dǎo)航欄設(shè)置透明度？我只學(xué)了html和css，請教各位有簡單的
2、怎樣給網(wǎng)站加上背景圖片？
3、HTML怎么弄鼠標(biāo)移到圖片出現(xiàn)半透明背景且背景0顯示文字。重點(diǎn)是文字不透明！只有背景透明
4、html/css 網(wǎng)頁背景圖片，如何自適應(yīng)寬度，長度不壓縮？ div如何半透明？詳解

html半透明顏色代碼（html白色半透明顏色代碼）

一、請問各位html大神，如何將如圖所示的導(dǎo)航欄設(shè)置透明度？我只學(xué)了html和css，請教各位有簡單的

在CSS中，增加透明度關(guān)鍵字，

推薦這個回答：

怎樣在CSS樣式中設(shè)置背景的透明度,下面一個具體的實(shí)例。把類為box的層設(shè)為透明。

<style>

.box{width:300px;

height:200px;

margin:0 auto;

boxder:1px solid #ccc;

background:#000;

filter:alpha(opacity:30);

opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}

</style>

其中background:#000; filter:alpha(opacity:30); opacity:0.3;為關(guān)鍵代碼，當(dāng)opacity值為1時，表示完全不透明，為0時表示完全透明。

其關(guān)的屬性介紹如下:

opacity: 0.3；這是“最重要的”，因?yàn)樗窃贑SS的現(xiàn)行標(biāo)準(zhǔn)。這將在Firefox，Safari和Opera的大多數(shù)版本的工作。這將是你所需要的一切如果所有的瀏覽器都支持目前的標(biāo)準(zhǔn)。當(dāng)然是他們不會錯。

filter:alpha(opacity=30);這一個是針對IE瀏覽器

-moz-opacity:0.3;你需要這一個支持老版本的Mozilla瀏覽器如Netscape Navigator。

-khtml-opacity: 0.3;這是舊版本的Safari（1.×）當(dāng)渲染引擎是使用仍被稱為kthml，而不是目前的WebKit。

——這是目前最專業(yè)的回答

二、怎樣給網(wǎng)站加上背景圖片？

1.去網(wǎng)上搜索2個自己喜歡的圖片，1個圖片用來作為整個網(wǎng)頁的背景，另一個圖片可以進(jìn)行重疊組成網(wǎng)頁的背景。

學(xué)哥找了2個大尺寸的圖片和2個小尺寸圖片，如下圖目錄所示：

在index.html所在的目錄下創(chuàng)建一個images目錄，將4個圖片全部放進(jìn)去。

2.給技術(shù)經(jīng)驗(yàn)的表格增加一個表頭，標(biāo)題分別是：技術(shù)類別，技術(shù)點(diǎn)，經(jīng)驗(yàn)?zāi)陻?shù)。文字加粗顯示。

在技術(shù)經(jīng)驗(yàn)的表格的第一行增加一個tr，里面增加3個td，然后復(fù)制一個CSS樣式td1，改名為tdh，增加設(shè)置文字粗體，背景色設(shè)置為淡灰色。

css代碼修改如下：

html代碼修改如下：

刷新頁面：

可以看到，表頭的文字加粗，并且背景色為半透明淺灰色。

設(shè)置tdh的background-color:rgba(200,200,200,0.6);，這是一個新的寫法，通過CSS的函數(shù)rgba可以設(shè)置一個RGBA顏色，這種顏色值帶有一個alpha通道，可以設(shè)置顏色的透明度，也就是可以透過當(dāng)前顏色的比率是多少。

RGBA 顏色值是這樣規(guī)定的：rgba(red, green, blue, alpha)。alpha 參數(shù)是介于 0.0（完全透明）與 1.0（完全不透明）的數(shù)字。

rgba(200,200,200,0.6);就是一個灰色的，透明度為0.6的一個半透明淺灰色。

因?yàn)檎麄€body的背景色也是灰色的，因此這里就看不出來tdh的背景色是半透明的，可以來調(diào)整body的背景為一個圖片，就能看出來是半透明的了。

設(shè)置背景圖片

之前講了通過設(shè)置body的background-color屬性來設(shè)置整個網(wǎng)頁的背景色。

背景色設(shè)置有時候局限性比較大，很多網(wǎng)站都采用圖片來設(shè)置背景圖片，可以做到讓網(wǎng)頁更美觀。

設(shè)置背景圖片的CSS屬性是像這樣的：

background-image: url(./images/background.jpg);

url是一個CSS函數(shù)，里面參數(shù)是圖片的目錄路徑。

一般采用相對目錄路徑，也就是假設(shè)index.html存放在哪一個目錄下，則在這個目錄下創(chuàng)建一個images目錄，將background.jpg文件放到images目錄里面去。

修改css文件的body的樣式，增加background-image，同時刪除bigtitle的width屬性，因?yàn)閐iv默認(rèn)就是寬度為100%，為了防止該屬性對背景圖片的干擾，所以刪除掉不必要的屬性。

css代碼修改如下：