javascript 如何使图像半透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5073532/
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 I make an image semi-transparent?
提问by TIMEX
Suppose I have an image that is a black circle PNG. (transparent background, black circle in middle)
假设我有一个黑色圆圈 PNG 图像。（透明背景，中间黑圈）
I want to place this black circle on top of some text, but I want to make it semi-transparent. How can I do that in CSS, or photoshop? Or what?
我想把这个黑色圆圈放在一些文字的顶部，但我想让它半透明。我如何在 CSS 或 photoshop 中做到这一点？要不然是啥？
回答by jessegavin
Here's how I might do it.
这是我可能会这样做的方法。
See a working example at jsFiddle
http://jsfiddle.net/MxQTz/2/
在 jsFiddle http://jsfiddle.net/MxQTz/2/看到一个工作示例
HTML
HTML
<p class="text">
Here is some text. This will be displayed beneath the black circle.
Here is some text. This will be displayed beneath the black circle.
<span class="circle"></span>
</p>
CSS
CSS
.text {
text-align: center;
padding: 20px;
border: solid 1px #eee;
width: 200px;
position: relative;
}
.text .circle {
background-image: url("http://nontalk.s3.amazonaws.com/black-circle.png");
background-repeat: no-repeat;
background-position: 50% 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Here's where you set the opacity */
opacity: .5;
/* Here's where you set the opacity for the bad browser */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
回答by McKayla
In CSS just use:
在 CSS 中只需使用：
img {
opacity: value;
}
Needs to be a value 0-1. 0 is completely transparent, 1 is opaque, 0.5 would be average. :)
必须是 0-1 的值。0 是完全透明的，1 是不透明的，0.5 是平均值。:)
回答by Obi-wan
Put jQuery on your site and write this:
将 jQuery 放在您的网站上并写下：
<script>
$(document).ready(function() {
$("div.circle").css({ opacity: 0.5 });
});
</script>
回答by Ruheet
In photoshop keep the circle above the text layer. then select the circle layer & in layer options reduce its transparency by dragging the slider. OR simply press numbers on the num pad of keyboard 0= full opaque, 9=10 % opacity & so on....
在 photoshop 中，将圆圈保持在文本层上方。然后选择圆形图层并在图层选项中通过拖动滑块来降低其透明度。或者只需在键盘的数字键盘上按数字 0= 完全不透明，9=10 % 不透明度等等....
回答by DrStrangeLove
you can use css property opacity = 0.5; filter:alpha 50 for IE;
您可以使用 css 属性 opacity = 0.5; 过滤器：IE 的 alpha 50；
