如何使图像半透明？

Question

假设我有一个黑色圆圈 PNG 图像。 （透明背景，中间黑色圆圈）

我想将这个黑色圆圈放在一些文本的顶部，但我想让它半透明。我怎样才能在 CSS 或 Photoshop 中做到这一点？或者什么？

Answer 1

我可以这样做。

查看 jsFiddle 的工作示例
http://jsfiddle.net/MxQTz/2/

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

.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)";
}

Answer 2

在 CSS 中只需使用：

img {
    opacity: value;
}

需要是 0-1 的值。 0 是完全透明，1 是不透明，0.5 是平均。 :)

Answer 3

将 jQuery 放在您的网站上并编写以下内容：

<script>
     $(document).ready(function() {   
      $("div.circle").css({ opacity: 0.5 });
});
</script>

Answer 4

您可以使用 css 属性 opacity = 0.5;过滤器：IE 为 alpha 50；

Answer 5

在 Photoshop 中，将圆圈保留在文本图层上方。然后选择圆形图层&在图层选项中通过拖动滑块来降低其透明度。或者只需按键盘数字键盘上的数字 0= 完全不透明，9=10% 不透明度 &很快....