MozTW 討論區 :: 檢視主題

http://www.w3.org/TR/css3-color/#transparency

例如說一個網頁有底圖，內有一個有設定底色的表格。可有辦法做到讓表格底色變成半透明混色（跟網頁底圖混色），但表格內的文字仍然是實心純色的呢？

直接把opacity屬性加到表格上的話，會讓整個表格內的東西通通都變成半透明，而且沒有辦法從表格內部調回不透明。迂迴的做法可以是把表格設為全透明底色，然後在原表格底下墊一層有顏色且半透明的東西。可是要怎麼才能讓"那層東西"的存在範圍僅限於表格的位置啊？

Alica 寫:

An old fashioned way is to use an alpha transparency image ([tt]png[/tt]) as background.

好像是一層遮罩，而非背景

MilchFlasche 寫:

好像是一層遮罩，而非背景

剛才翻了一下CSS 3的文件，裡頭就用了mask這個字XD
看起來和IE的filter效果是一樣的
不能讓子元素變成不透明還真是麻煩 >"<

這樣不知道行不行得通??

body { opacity:0; }
body * { opacity:1 !important; }

引言回覆:

body { opacity:0; }
body * { opacity:1 !important; }

看來是沒用，畢竟「 body 」和「 body * 」是不同層次的，
所以就算寫 !important 也沒意義。

不能讓子元素變成不透明還真是麻煩 >"<

wini 寫:

引言回覆:

body { opacity:0; }
body * { opacity:1 !important; }

看來是沒用，畢竟「 body 」和「 body * 」是不同層次的，
所以就算寫 !important 也沒意義。

用在 body 是一定沒有用的，應該要試 body 裏面的 node 才行。

body { opacity:0.8; }
body * { opacity:0.8 !important; }

hemiola 寫:

用在 body 是一定沒有用的，應該要試 body 裏面的 node 才行。

不過我用在 body 或裡面的元素都差不多的樣子，
不同人的電腦會有差別？

跟Safari的PNG色不對……這是怎麼一回事？ :shock:

風痕影寫:

不能讓子元素變成不透明還真是麻煩 >"<

I would suggest my old fashioned method aforementioned.

Otherwise, use two DIVs (or layers), and position one on top of the other one. Then you can specify one layer (DIV) as translucent background.

發表人:	Alica [ 2006-01-18, 21:06 ]
文章主題 :	CSS3半透明
http://www.w3.org/TR/css3-color/#transparency 例如說一個網頁有底圖，內有一個有設定底色的表格。可有辦法做到讓表格底色變成半透明混色（跟網頁底圖混色），但表格內的文字仍然是實心純色的呢？直接把opacity屬性加到表格上的話，會讓整個表格內的東西通通都變成半透明，而且沒有辦法從表格內部調回不透明。迂迴的做法可以是把表格設為全透明底色，然後在原表格底下墊一層有顏色且半透明的東西。可是要怎麼才能讓"那層東西"的存在範圍僅限於表格的位置啊？

發表人:	ants [ 2006-01-18, 21:39 ]
文章主題 :
Alica 寫: http://www.w3.org/TR/css3-color/#transparency 例如說一個網頁有底圖，內有一個有設定底色的表格。可有辦法做到讓表格底色變成半透明混色（跟網頁底圖混色），但表格內的文字仍然是實心純色的呢？直接把opacity屬性加到表格上的話，會讓整個表格內的東西通通都變成半透明，而且沒有辦法從表格內部調回不透明。迂迴的做法可以是把表格設為全透明底色，然後在原表格底下墊一層有顏色且半透明的東西。可是要怎麼才能讓"那層東西"的存在範圍僅限於表格的位置啊？ An old fashioned way is to use an alpha transparency image ([tt]png[/tt]) as background.

發表人:	Alica [ 2006-01-18, 23:20 ]
文章主題 :
ants 寫: Alica 寫: http://www.w3.org/TR/css3-color/#transparency 例如說一個網頁有底圖，內有一個有設定底色的表格。可有辦法做到讓表格底色變成半透明混色（跟網頁底圖混色），但表格內的文字仍然是實心純色的呢？直接把opacity屬性加到表格上的話，會讓整個表格內的東西通通都變成半透明，而且沒有辦法從表格內部調回不透明。迂迴的做法可以是把表格設為全透明底色，然後在原表格底下墊一層有顏色且半透明的東西。可是要怎麼才能讓"那層東西"的存在範圍僅限於表格的位置啊？ An old fashioned way is to use an alpha transparency image ([tt]png[/tt]) as background. 呃，這的確是個好辦法……還可以讓Opera也達到一樣的效果。用opacity的話Opera還要等9出來才有得用，改用png的話現在就可以了。IE6既不支援opacity也不支援png（IE7會有吧？），那就沒辦法啦。總之非常感謝。

發表人:	MilchFlasche [ 2006-01-19, 08:34 ]
文章主題 :
這也是我之前用opacity一直覺得很困擾的問題，因為半透明度一用，所有的子元素就全都會繼承到這個屬性，好像是一層遮罩，而非背景。為什麼W3C要這樣制定呢？這樣子這個opacity的用意到底是什麼呢？還是說opacity其實可以設超過1的值？:P（別理我）

發表人:	風痕影 [ 2006-01-19, 15:21 ]
文章主題 :
MilchFlasche 寫: 好像是一層遮罩，而非背景剛才翻了一下CSS 3的文件，裡頭就用了mask這個字XD 看起來和IE的filter效果是一樣的不能讓子元素變成不透明還真是麻煩 >"<

MozTW 討論區 https://forum.moztw.org/

CSS3半透明 https://forum.moztw.org/viewtopic.php?f=8&t=12477	第 1 頁 (共 1 頁)

發表人:	訪客 [ 2006-01-19, 17:37 ]
文章主題 :
風痕影寫: MilchFlasche 寫: 好像是一層遮罩，而非背景剛才翻了一下CSS 3的文件，裡頭就用了mask這個字XD 看起來和IE的filter效果是一樣的不能讓子元素變成不透明還真是麻煩 >"< 代碼: aa { opacity: 0.x; } aa * { opacity: 1 !important; } 這樣不知道行不行得通??

發表人:	wini [ 2006-01-19, 18:19 ]
文章主題 :
hemiola 寫: 這樣不知道行不行得通?? 引言回覆: body { opacity:0; } body * { opacity:1 !important; } 看來是沒用，畢竟「 body 」和「 body * 」是不同層次的，所以就算寫 !important 也沒意義。（而且我覺得 opacity 很容易吃太多 CPU ，除非半透明的那部分不打算讓它移動。）

發表人:	訪客 [ 2006-01-19, 18:36 ]
文章主題 :
wini 寫: 引言回覆: body { opacity:0; } body * { opacity:1 !important; } 看來是沒用，畢竟「 body 」和「 body * 」是不同層次的，所以就算寫 !important 也沒意義。用在 body 是一定沒有用的，應該要試 body 裏面的 node 才行。

發表人:	ants [ 2006-01-19, 21:27 ]
文章主題 :
風痕影寫: 不能讓子元素變成不透明還真是麻煩 >"< I would suggest my old fashioned method aforementioned. Otherwise, use two DIVs (or layers), and position one on top of the other one. Then you can specify one layer (DIV) as translucent background.

發表人:	wini [ 2006-01-20, 17:49 ]
文章主題 :
hemiola 寫: wini 寫: 引言回覆: body { opacity:0; } body * { opacity:1 !important; } 看來是沒用，畢竟「 body 」和「 body * 」是不同層次的，所以就算寫 !important 也沒意義。用在 body 是一定沒有用的，應該要試 body 裏面的 node 才行。不過我用在 body 或裡面的元素都差不多的樣子，不同人的電腦會有差別？不過我在想，能讓 opacity 值超過 1 ，應該有辦法讓子元素變得更 opacity 吧。比如說照下面寫的，然後試著個別改變 body 和 body * 的值：引言回覆: body { opacity:0.8; } body * { opacity:0.8 !important; } 可以發現 body * 的 opacity 是 "0.80.8" ，所以讓它 "0.8X=1, X=1.25" 這樣子，說不定就能使內文比較易見了，可是我覺得這樣會有另一個問題，因為底下的 body * 仍是一整塊的，所以大概就是會看到一塊一塊 opacity 為 1 的區塊吧。也許只能考慮用圖片再配上 IE Only 的語法試試了。（另一個做法就是寫個空元素區塊放在字下面試試，不過這樣子會有 position 與 z-index 的問題要解決。）

發表人:	訪客 [ 2006-01-20, 17:57 ]
文章主題 :
wini 寫: hemiola 寫: 用在 body 是一定沒有用的，應該要試 body 裏面的 node 才行。不過我用在 body 或裡面的元素都差不多的樣子，不同人的電腦會有差別？其實我沒有試過。我的意思只是，body 的情況比較特別，和其他 element 處理的情形不同。另外你說的 1.25 這種方法應該是行不通? 因為 opacity 的值必須在 0.0 與 1.0 之間。

發表人:	Alica [ 2006-03-18, 18:41 ]
文章主題 :
超大量alpha PNG之背景半透明使用範例。 http://browsershots.org/website/853694/ IE6不支援alpha PNG，所以直接用CSS hack把背景圖省略了。其他的看起來都大同小異，除了Konqueror缺字（該是抓圖電腦的設定問題）跟Safari的PNG色不對……這是怎麼一回事？

發表人:	ants [ 2006-03-18, 21:17 ]
文章主題 :
Alica 寫: 跟Safari的PNG色不對……這是怎麼一回事？ It could due to the service. Otherwise, try not to embed colour profiles. Use standard one.

發表人:	MilchFlasche [ 2006-03-18, 21:57 ]
文章主題 :
ants 寫: 風痕影寫: 不能讓子元素變成不透明還真是麻煩 >"< I would suggest my old fashioned method aforementioned. Otherwise, use two DIVs (or layers), and position one on top of the other one. Then you can specify one layer (DIV) as translucent background. 我覺得Anthony這個方法很好。我也是看了新版的TiddlyWiki，才知道原來可以用兩層div疊在一起做陰影效果:)

第 1 頁 (共 1 頁)	所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/