如何使 HTML 表格部分透明?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7323344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make a HTML table partially transparent?
提问by James
If I have a HTML table like the one below:
如果我有一个如下所示的 HTML 表格:
<table bgcolor="#151515" height="100" width="200">
<tr>
<td>
Hello
</td>
</tr>
</table>
How can I make it partially transparent? Is there a way of doing it without CSS? If not what is the CSS way?
我怎样才能使它部分透明?有没有办法在没有 CSS 的情况下做到这一点?如果不是,CSS 方式是什么?
回答by Mike
You can try this in your html file:
你可以在你的 html 文件中试试这个:
<table class='table1'>
<tr><td>...
And this in your css file:
这在你的 css 文件中:
.table1 {
background: rgba(255,255,255,0.5);
}
This sets the rgba RED GREEN BLUE ALPHA values, 255,255,255 = white, 0,0,0 = black, and the 0.5 value at the end (ALPHA) is between 0 and 1, where 1 is opaque and 0 is transparent. I hope this helps.
这将设置 rgba RED GREEN BLUE ALPHA 值,255,255,255 = 白色,0,0,0 = 黑色,最后的 0.5 值 (ALPHA) 介于 0 和 1 之间,其中 1 表示不透明,0 表示透明。我希望这有帮助。
In your case, #151515 (HEX CODE) translates to (21, 21, 21, 0.5) (RGBA) where A is equal to 50% transparent.
在您的情况下,#151515 (HEX CODE) 转换为 (21, 21, 21, 0.5) (RGBA) 其中 A 等于 50% 透明。
回答by Obi
You can set the opacity or transparency of the background in CSS, as follows
可以在CSS中设置背景的不透明度或透明度,如下
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
The above makes it 60% clear. Hope this helps.
以上使它60%清楚。希望这可以帮助。
回答by Max
With CSS you set the opacity
to a value between 0 and 1. However, that will make any element inside your table transparent.
使用 CSS,您可以将 设置为opacity
0 到 1 之间的值。但是,这将使表格中的任何元素都透明。
A better solution (unfortunately) is to make a tiling background png with slight transparency. That way you can fade the background without fading the content.
一个更好的解决方案(不幸的是)是制作一个具有轻微透明度的平铺背景 png。这样您就可以在不使内容褪色的情况下淡化背景。
回答by Jon
Replying to old post but this is still relevant as I just referenced it =)
回复旧帖子,但这仍然是相关的,因为我刚刚引用了它 =)
Too... you can use fireworks or (presumably) photoshop to create an all black .png image (just a black box). Set your desired transparency with the toolbar and set said photo as your table background image. It defaults to repeat itself so will fill your table. You will have a transparent table that you can see your -body bg img/color- through and anything you put into the table will be unaffected by the transparency.
太......你可以使用烟花或(大概)photoshop来创建一个全黑的.png图像(只是一个黑盒子)。使用工具栏设置所需的透明度并将所述照片设置为表格背景图像。它默认重复本身,所以会填满你的桌子。您将有一个透明的桌子,您可以通过它看到您的 -body bg img/color- 并且您放入桌子的任何东西都不会受到透明度的影响。
Jon
乔恩
回答by user7976874
The way to change the background color and opacity is adding this attribute to your css.
更改背景颜色和不透明度的方法是将此属性添加到您的 css 中。
background-color: rgba(100,200, 0, 0.5);
(not background)
background-color: rgba(100,200, 0, 0.5);
(不是背景)
If you want to change the background+text content opacity, you can use:
如果要更改背景+文本内容的不透明度,可以使用:
opacity:0.6;
opacity:0.6;