導航:首頁 > 圖片大全 > 在css中如何把背景圖片變透明

在css中如何把背景圖片變透明

發布時間:2022-02-04 00:44:01

『壹』 Css實現背景圖片半透明效果。

你的圖片跟第二個層在同一個層里,第二個層又是相對定位,當然不行了。

<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>

<div width="1024" height="768">
<img src="C:\\webstudy\\Pic\\2.jpg" class="alpha"/>
</div>
<div style=" position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>

或者:
<style type="text/css">
.alpha{filter:alpha(opacity=30);width:400px;}
</style>

<div style="position:relative" width="1024" height="768">
<img src="My Pictures/q-1.jpg" class="alpha"/>
<div style="position:absolute;left:0px; top:0px">
<font color=red>asdfasdfd</font>
<br><br><br><br>sdfsdfsdfsdfsdf<br><br><br>
</div>
</div>

『貳』 請問在HTML中如何把一張圖片的背景設置為透明的

在CSS中你應該還需要把圖片背景地址定義進去。
還有,感覺你等下可能還要再問,這個層裡面的文字也透明了,而你只需要背景透明。
所以再補充如下:
.alpha1 /* 定義透明背景,這里你還可以定義層的寬度高度等 */{background:url(你的背景圖片URL地址)
filter:alpha(opacity=50);}
.alpha2 /* 不透明文字 */{position:relative;}調用方法:<div class=alpha1
<div class=alpha2文字或其他內容</div</div

『叄』 css里怎麼給背景圖片變透明點 給圖片的div加什麼代碼才能實現呢

1、新建html文檔,在body標簽中添加一個img標簽,這時默認情況下圖片是不透明的:

『肆』 背景圖片的透明度如何設置(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"> ... ...

『伍』 css中,怎麼寫背景圖片的透明度

親,我們經常會使用到背景圖片,但有時候需要把背景圖片設置一個半透明的效果,那麼就需要以下的CSS了。這是一個CSS濾鏡達到的效果,應用十分廣泛。
.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

註:
代碼應用的式CSS中的Alpha濾鏡,這個濾鏡可以設置目標元素的透明度。還可以通過指定坐標,從而實現各種不同范圍的透明度。具體語法如下:
{filter:alpha(opacity=#opacity,finishopacity=#finishopacity,
style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具體參數含義如下:
「opacity」表示透明度調節,范圍在0-100,0表示完全透明,100表示完全不透明。
「finishopacity」 是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
「style」 指定透明區域的形狀特徵:0 代表統一形狀,1 代表線形,2 代表放射狀,3 代表矩形
「startx」 漸變透明效果開始處的 X坐標。
「starty」 漸變透明效果開始處的 Y坐標。
「finishx」 漸變透明效果結束處的 X坐標。
「finishy」 漸變透明效果結束處的 Y坐標。
以上的參數可以選用,可以只設置一個opacity
如果設置成下面代碼,就表示背景式半透明的:
{filter:alpha(opacity=50)}

『陸』 怎麼用css方式或者ps方式把這張圖片的背景變成透明的 謝謝你們了

透明的PNG格式

看了你的補充提問,「現在不是透明的問題了 我想知道怎麼讓IE6支持 png透明 有好的辦法嗎」

解答如下:

所謂透明,就是文字和圖像以外的部分是透明的,那麼什麼叫透明呢?透明是以參照物來判斷的,如果參照物是紅色,那麼我們看到紅色了,就證明是透明的;如果參照物是綠色,那麼我們看到綠色就證明是透明了;如果參照物是一幅圖像,那麼我們看到圖像的一部分了就請明圖像是透明的;

那麼在電腦上看圖,怎麼知道它是透明的還是不透明的呢?電腦屏幕全世界都是以白色為底色的,所以,我們沒辦法判斷是透明還是不透明。

那麼到底怎樣才能判斷是透明還是不透明的呢?PS為了實現這一目標,它用底色為黑白相間的格子來作為底色,所以透明的圖像,即PNG圖像,只要導入PS就知道它是透明還是不透明了。

至於你說的IE6支持透明的問題,這是不存在的。

『柒』 HTML能否把背景圖改成透明的

<body bgcolor="#000000">改成

<body background="c:\aaa.jpg">
就可以了
c:\aaa.jpg可以替換成你想要的圖片路徑

第一張圖,background="d:\my documents\my pictures\1.jpg",不是background"d:\my documents\my pictures\1.jpg" 少個等號

第二次,background:url(d:\my documents\my pictures\1.jpg)",不是background:url(d:\my documents\my pictures\1.jpg"",最後多個引號少個括弧

順便說一下我們這兩種做法的原理都是用一張你想要做桌面背景的圖來當html的背景,不是把Html變透明,html的背景是無法透明的,因此這個1.jpg就應該是整個桌面背景圖了,不能在桌面上挖出一塊說這里放個html還要他背景透明

『捌』 css把背景變全透明

暈死!好像不用這么麻煩啊!
等會啊,我查查!
1.進入你的空間----|設置|----|模板設置|-----自定義模版CSS可以讓您: • 直接編輯CSS文件,實現個性化效果----|編輯|

2.刪除開頭處的4句語句:

body{background-color:#FFFFFF}
#header{height:89px;background:#CDF991}
#header div.lc{}
#header div.rc{background:url(http://img..com/hi/temp9/hdr.jpg) no-repeat top right}

3.刪除第21行處的這條語句:

.stage{background:#DFFFB2}

4.在開頭位置復制並粘貼以下語句:

body {background:url(

) repeat fixed!important}

#m_pro{background:transparent}

#m_album{background:transparent}

#m_blog{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

#header{height:89px}

#m_links{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
搞定!去看看吧!

『玖』 如何用css做背景圖片透明

1是背景圖要在ps裡面處理成gif或png24等支持背景透明的格式
2是png在ie6下背景不會透明,解決辦法請網路:dd_png.js

『拾』 css怎麼調背景圖片透明度

只能使用css濾鏡效果,但是只能IE支持此效果,其他瀏覽器是不支持的,建議換成PNG的透明圖片,用JS來調整IE6下PNG失效的bug。

閱讀全文

與在css中如何把背景圖片變透明相關的資料

熱點內容
獃獃熊圖片大全 瀏覽:549
意境女生壁紙圖片 瀏覽:699
紅衣服風景圖片 瀏覽:534
超小波浪卷發發型圖片 瀏覽:212
動漫丫鬟圖片 瀏覽:261
qq五秒圖片銷毀怎麼復原 瀏覽:296
圖片的內容是什麼怎麼瘦怎麼寫 瀏覽:703
美女拉粑粑惡心圖片 瀏覽:548
皮鞋搭配衣服圖片女冬 瀏覽:118
電熱鍋圖片價格大全 瀏覽:437
微信圖片鎖了怎麼解 瀏覽:316
ps怎麼寫字到圖片上去 瀏覽:825
男生金吊墜圖片 瀏覽:598
微信頁面怎麼設置圖片 瀏覽:352
舞蹈生生日蛋糕網紅款圖片女生 瀏覽:537
帶文字的心理測試題圖片 瀏覽:583
男生正裝冬季圖片 瀏覽:225
浙江的女生圖片 瀏覽:534
法師可愛圖片頭像 瀏覽:196
美女關起來圖片 瀏覽:146