當前位置:首頁 » 背景圖片 » css背景圖片透明
擴展閱讀
唯美橙色的花圖片 2024-12-25 00:16:03
唯美圖片短發 2024-12-25 00:08:28
手機小屏精緻圖片 2024-12-24 23:52:02

css背景圖片透明

發布時間: 2022-01-06 23:49:13

⑴ CSS怎麼設置圖片透明的背景不顯示 頁面中有一張圖片,背景是透明的,我想給這張圖片加個邊框,但是邊

再加邊框之前把「邊框」扣成透明背景(即邊框內、外都為透明),然後再把邊框加到背景透明的圖片上就可以達到你說的效果。

⑵ 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>

⑶ 如何用css做背景圖片透明

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

⑷ 背景圖片的透明度如何設置(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把背景變全透明

暈死!好像不用這么麻煩啊!
等會啊,我查查!
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怎麼調背景圖片透明度

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

⑺ 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里怎麼給背景圖片變透明點 給圖片的div加什麼代碼才能實現呢

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

⑼ CSS背景顏色透明

個人建議做一個有透明度的png,然後把這個圖片設置成input的背景。因為在ie裡面,對於alpha濾鏡,會把這個濾鏡應用到對於元素及其內部所有文本上的,透明度設置得低一點還看不太出來,設置得一高,就會有各種問題了。

⑽ css裡面怎麼設置圖片的透明度,代碼是什麼,謝謝

在圖片的屬性中加上{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

參數說明:

opacity是最重要的,因為它是CSS透明的標准屬性,取值范圍在0-1之間,目前支持的瀏覽器有:

Firefox、Chrome、Opera、Safari。(也就是說,除了IE,它支持所有主流瀏覽器);

filter:alpha(opacity=50);是專門給IE設定的屬性,取值的范圍在0-100之間;

-moz-opacity是為了兼容一些老版本的Mozilla瀏覽器,取值范圍在0-1之間;

-khtml-opacity是為了兼容一些老版本的Safari瀏覽器,取值范圍在0-1之間。

以上是兼容瀏覽器參數,看別人的代碼,通常情況下會剩去後兩個屬性,這是因為Mozilla和Safari瀏覽器都支持自動更新,用這些瀏覽器的人一般用的也是較新的版本,因此後兩個為了兼容較老的瀏覽器的屬性不用也罷。

以上就是CSS透明屬性的基本用法,然而用到透明屬性的地方,一般都是用在層疊層次較多的下層

來用,這就需要考慮CSS的繼承問題:因為下層透明的元素,上層也會跟著透明。目前我還沒有很

好的方法解決這個繼承問題(有更好解決辦法的歡迎留言告之),所以遇到這種情況,我通常是

把HTML部分要透明的部分獨立分離開,然後採用定位的方法再把它定位到該放置的位置。