如何使图像半透明？

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