當前位置:首頁 » 風景景觀 » css透明背景色

css透明背景色

發布時間: 2021-03-15 02:44:32

① css 用濾鏡設置背景為透明色

1、濾鏡:Alpha
語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
說明:
Opacity:起始值,取值為0~100, 0為透明,100為原圖。
FinishOpacity:目標值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、濾鏡:blur
語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說明:
Add:一般為1,或0。
Direction:角度,0~315度,步長為45度。
Strength:效果增長的數值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、濾鏡:Chroma
語法:STYLE="filter:Chroma(Color = color)"
說明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、濾鏡:DropShadow
語法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說明:Color:#rrggbb格式,任意。
Offx:X軸偏離值。
Offy:Y軸偏離值。
Positive:1或0。
例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、濾鏡:FlipH
語法:STYLE="filter:FlipH"
例子:filter:FlipH
6、濾鏡:FlipV
語法:STYLE="filter:FlipV"
例子:filter:FlipV
7、濾鏡:glow
語法:STYLE="filter:Glow(Color=color, Strength=strength)"
說明:
Color:發光顏色。
Strength:強度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡:gray
語法:STYLE="filter:Gray"
例子:filter:Gray
9、濾鏡:invert
語法:STYLE="filter:Invert"
例子:filter:Invert
10、濾鏡:mask
語法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、濾鏡:shadow
語法:filter:Shadow(Color=color, Direction=direction)
說明:
Color:#rrggbb格式。
Direction:角度,0-315度,步長為45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡:wave
語法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
說明:
Add:一般為1,或0。
Freq:變形值。
LightStrength:變形百分比。
Phase:角度變形百分比。
Strength:變形強度。
例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、濾鏡:Xray
語法:STYLE="filter:Xray"
例子:filter:Xray

② css怎麼讓背景透明

.f1_a2_t_wz{
filter:alpha(opacity=50);
opicaty:50;
}

③ 在css中怎樣讓文字的背景色透明

設置元素的透明度:
-moz-opacity:0.8; /*在Firefox中設置元素透明度
filter: alpha(opacity=80); /*ie使用濾鏡設置透明
但是當我們對一個標簽設置背景的透明度時,往往我們並不希望該標簽上的文字圖片也變成半透明了。
例如:
<div><p>不透明</p></div>
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明顯的看出文字也被半透明的,這是我們不想看到的效果。
以前我曾經是絕對定位的方法解決這個問題,也就是現在的p並不是div的子元素。
<div></div>
<p>不透明</p>
這樣div的半透明效果也就不會影響到元素p了。最後在將p定位到需要的位置。
但是很多時候這樣的標簽並不是很合理,有可能還會多浪費幾個標簽。
下面的這種方法就可以解決上面的問題了:
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現FF背景透明,文字不透明*/
background:#000; filter:Alpha(opacity=20);/*實現IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*實現IE文字不透明*/

④ CSS怎麼設置讓背景顏色透明,而文字不透明

1、首先我們新建一個html文件,添加一個DIV,設置寬度和高度,以及背景色填充為紅色。

⑤ CSS如何定義DIV背景半透明顏色

  • 「長城郭靖」回答的是錯的,他答的是讓整個元素半透明


  • 只讓背景半透明只有一專個辦法,就是用rgba顏色屬,代碼如下

background:rgba(0,0,0,0.5)

解釋:這是黑色半透明的代碼

前三個值表示顏色的red,green,blue值

最後一個表示alpha值,就是透明度值,不透明為1

(支持IE8+以及所有現代瀏覽器)


  • 還是不懂的話,可以參考 網路 「rgba」詞條 和 「CSS 顏色值」詞條

⑥ 在div+css中怎麼讓背景顏色透明

css中有一個opacity屬性,可以設置透明度

如下例子:

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.div1{width:200px;height:200px;opacity:0.6;background:red;}
</style>
</head>
<body>
<divclass="div1"></div>
</body>
</html>

⑦ 請問用CSS設置背景透明之後還能讓滑鼠經過時改變背景色嗎(經過時背景無所謂透不透明)

不是js的問題,是css優先順序問題,ID的優先順序比class的優先順序高,而且你用了important,再而且css是後面的覆蓋前面的!

所以你後面的check樣式被覆蓋了,解決辦法可以是這樣聲明你的check

#p1.check{
background-color:red!important;/*因為之前聲明的背景色有這個important標識所以這里要加上,保證優先順序高於#p1*/
}

或者,重新聲明你的p1 給他加上個class .p1 把給#p1的樣式加給.p1

.p1{
height:18px;
float:left;
padding:2px4px2px4px;
margin-left:5px;
cursor:pointer;
background:rgba(170,150,174,0.5)nonerepeatscroll00!important;
filter:Alpha(opacity=80);background:#fff;
}
.check{
background-color:red!important;
}

這是你上面描述的,我覺得1L說的也對啊,你直接用#p1:hover{background:red;}不就達到你的效果了嗎,寫這么多行要起到的作用不就和這一行一樣嗎...你還有別的想法我就不知道了。

⑧ CSS中背景顏色透明度如何設置

opicaty:50; // 0-100為透明值 100為不透明

不過,ie8及以下不識別,
所以要針對它們再寫一句
filter:alpha(opacity=50);

⑨ CSS/DIV背景色透明代碼問題

背景透來明方法常用的兩源種方法:

方法一:
使用background屬性 { background:rgba(0,0,0,0.6);} 前三個參數是顏色的rgb值,最後一個參數是透明度,0.6就是60%的透明度。只能兼容到ie9及以上瀏覽器。
方法二:
使用半透明圖片{backgroun-images:url(這里是png半透明圖片的路徑);}默認全部鋪滿div,只要控制png透明圖片的透明度就可以了。ie6不支持該方法,但是ie6使用群體已經想當少了,可以忽略。

以此類推,div和任何標簽都可以使用以上兩種方法。

⑩ html-css 中如何讓一個DIV的背景色是透明的,但它的內容(文字圖片之類的)不是透明的

摳個1px的背景圖,半透明的,這是有效解決半透明兼容ie7到ie11以及其他主流瀏覽器最有效的方法

熱點內容
一部國外電影,一個老男人騎個摩托車 發布:2024-08-19 09:13:10 瀏覽:920
脖子上有睾丸是什麼電影 發布:2024-08-19 09:03:17 瀏覽:374
變形金剛撒誰家的 發布:2024-08-19 08:43:06 瀏覽:478
美國男電影雙胞胎 發布:2024-08-19 08:42:20 瀏覽:764
黑人橄欖球少年收養電影 發布:2024-08-19 08:25:26 瀏覽:918
夏目哉大片 發布:2024-08-19 08:09:22 瀏覽:806
他第一部出演的電視劇是,的英語 發布:2024-08-19 08:07:54 瀏覽:654
電影檢索 發布:2024-08-19 07:48:52 瀏覽:198
誰有視頻 發布:2024-08-19 07:41:55 瀏覽:141
成龍香港鬼片電影大全 發布:2024-08-19 07:39:46 瀏覽:223