導航:首頁 > 萬維百科 > 網頁設計如何讓背景圖透明度

網頁設計如何讓背景圖透明度

發布時間:2020-09-02 14:29:17

1、css中,怎麼寫背景圖片的透明度?

將一來個div設置為絕對定位,在這個自div下設置背景圖片與改變圖片透明度。舉例:
html :
...<div id="content"><h1>Hello world!</h1></div> <div id="background"></div>...
css:
#background{ width:100%;height:100%;position:absolute;top:0px;opacity: 0.6;background-image: url(test.jpg);background-size: 500px 500px;}
親測能看到效果。

2、HTML如何給背景顏色設置透明度?

(1)創建一個html文件。如圖

(2)在html文件找到一個<body>標簽,在這個標簽里創建一個<div>標簽並版添加一個類,在這把這權個類設置為:rgba。 如圖

(3)為div添加樣式。在<title>標簽後面創建一個<style>,在<style>標簽里設置rgba類的高和背景透明度的樣式(rgba(R,G,B,A))。透明度參數,取值在0~1之間,不可為負值,透明度參數越小透明度越高。如圖

(4)保存後使用瀏覽器查看。可以看到當透明度為由0.1修改為1時div背景由灰色變為了黑色。如圖:

(5)所有代碼。可以把所有代碼復制到新建的html文件上,保存好後使用瀏覽器打開借口看到效果。如圖

3、網頁背景的透明度怎麼調節?

CSS樣式表裡面的阿爾法通道。

在</head>之前一行插入
<style type=\"text/css\">
.tabbg{filter:alpha(opacity=透明度);}
</style>
透明度數值1~100之間

然後有背景的表格<table ....>添加<table ..... class=tabbg>即可,注意這個做法是整個表格包括文字也有想同透明度,如果只是要背景圖片透明則需要將表格和圖片放到不同層裡面互不幹擾才行。

4、背景圖片的透明度如何設置(CSS)

可以設置啊,如圖:

常見的失敗做法

最常見的做法事設置元素的opacity,這種設置出來的效果就是內容與背景都事半透明的,嚴重影響視覺效果。

還有就是設置background-color:rgba(),這種方式只能設置背景顏色的透明度。

正確Action:

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>登陸</title>    <style type="text/css">        body{            background-image:url(images/bird.jpg);            background-repeat: no-repeat;            background-size:100%;        }        .login_box::before{            content:"";            /*-webkit-filter: opacity(50%);             filter: opacity(50%); */            background-image:url(images/love.jpg);            opacity:0.5;//透明度設置            z-index:-1;            background-size:500px 300px;            width:500px;            height:300px;            position:absolute;            //一定要設置position:absolute,這樣才能設置z-index,讓背景處於內容的下一層            top:0px;            left:0px;            border-radius:40px;        }        .login_box{            position:fixed;            left:50%;            top:200px;            width:500px;            height:300px;            margin-left:-250px;            border-radius:40px;            box-shadow: 10px 10px 5px #888;            border:1px solid #666;             text-align:center;        }        form{            display:inline-block;            margin-top:100px;        }        input{            display:block;            width:250px;            height:30px;            background-color: #888;            border:1px solid #fee;            outline:none;            border-radius:10px;        }        input[type="submit"]{            width:100px;            height:30x;            margin-left: 70px;            background-color: #ccc;        }        span{            color:red;            font-size:15px;        }    </style> </head> <body>    <div class="login_box"> ... ...

5、請問:怎樣用CSS來設置網頁背景圖片的透明度?

單純從你的想法是做不到的,但是你可以這樣:
把圖片背景從原來的位置分離到一個div裡面去,這個div大小和原先背景圖片的尺寸一樣大小,這個div設置透明度

6、網頁背景圖片能否設置透明度

http://hi.網路.com/zimeimei/blog/item/6be78e01aab2b5d6267fb551.html

7、Dreamweaver 8中 網頁背景圖片怎麼設置透明度?

(1):「Opacity」代表透明度水準,范圍是0---100,其實就是百分比的意思,如果你想變為全透明,那麼就用0代替Opacity後面的問號吧。
(2):「FinishOpacity」就是用來指定結束時的透明度,范圍跟Opacity一樣(FinishOpacity為可選參數,不想要的話就去掉它吧。
(3):「Style」是指定透明區域的形狀特徵,0代表統一形狀,1代表線形,2代表放射形,3代表長方形。比如我們一般可以寫成Style=1。
(4)「startX」與」startY」就是代表漸變效果開始的X與Y坐標,(坐標應該知道是什麼吧)一般我們設置為StartX=0, StartY=0(這樣就是表示的透明效果是從圖片的左上角開始的。)
(5)「FinishX」與「FinishY」當然,這個就是代表漸變效果結束時的橫縱坐標了,這里很關鍵,填什麼數值那就要看你的圖片的高與寬了,假設我們的圖片高與寬分別是100、200像素,那麼就可以寫成FinishX=200, FinishY=100。(如果你只想要一半的面積是透明,那麼可以設置成FinishX=100, FinishY=50)
給下面一個完整代碼的給你們參考:(下面的數值我是假設圖片高與寬分別是100、200像素)
Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)
4:ok,這時候你應該做的是把你想要的數值把那些討厭的問號替換掉,設置好這些參數後,就點擊ok。設置的步驟到此就算完成了,但設置完了不代表我們就做完了,我們還要把這個效果賦予圖片呢。下面介紹如何使用的步驟。
1:在Dreamweaver 4插入一圖,假設高為100,寬為200單位是像素(為了能看到效果,我們可以把網頁的背景設為紅色等鮮明的色彩。
2:再次調出css styles窗口(參見設置步驟1)
3:在css styles窗口中,應該有個clarity,如圖指明處:
4:在Dreamweaver 4選中你插入的圖。
5:用滑鼠單擊上圖3的指明處。
6:大功告成,你可以按鍵盤的f12來預覽了(注意,這種特效在編輯狀態下是不可見的,一定要預覽才可見。

8、怎樣把網頁的背景圖像設置得透明一點啊?

用dreamweaver設計啊,這個工具的前台美化功能本來就很強大,不必要用到PS.下面是處理圖像的步驟:
1、先在DW設計頁面中插入你要處理的圖像,記住是插入圖像,不要在頁面屬性那添加背景,現在還沒到添加背景那一步;
2、選中圖像,在下面屬性欄里你就會看到一組可以編輯圖像的工具;
3、選擇第5個「亮度和對比度」工具,打開之後將亮度調高,將對比度調低就OK的了,要透明的程度你自己把握就行;
4、這一點是需要特別注意的:你調整好圖片按保存之後,那麼這張圖像將不可以再恢復原樣,如果你還想保留原圖,你可以在調整之前復制一份出來;
5、圖像已經處理完畢,將插入的這張圖像刪掉,再在「頁面屬性」那添加背景即可。

9、html中怎麼設置body背景圖片的透明度,但不影響其他圖片與文字

方法一:把文字放在<div class="bodystyle"> </div>裡面,但因為opacity屬性會被繼承,會導致你的文字也會透明,所以要在文字的CSS樣式裡面聲明opacity:1;把它變得不透明;

方法二:在.bodystyle裡面加上z-index:1;然後把你需要的文字放在一個新的div裡面
<div style="position:absolute; z-index:2;" > <div>

額外介紹一下z-index屬性:z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。值越高會放在越前面。這個屬性起作用的前提是元素要脫離文檔流進行絕對定位,也就是要聲明position:absolute;

10、HTML如何給背景顏色設置透明度

為div添加樣式。在<title>標簽後面創建一個<style>,在<style>標簽里設置rgba類的高
和背景透明度的樣式(rgba(R,G,B,A))。透明度參數,取值在0~1之間,不可為負值,
透明度參數越小透明度越高。
#test-1, #test-2, #test-3{
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    margin-left: 50px;
    color: #FFF;
}

#test-1{
    background-color: rgba(0,0,0,1);
}
#test-2{
    background-color: rgba(0,0,0,0.5);
}
#test-3{
    background-color: rgba(0,0,0,0.2);
}

與網頁設計如何讓背景圖透明度相關的知識