How do I make an image semi-transparent?

Question

Suppose I have an image that is a black circle PNG. (transparent background, black circle in middle)

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?

Answer 1

Here's how I might do it.

See a working example at 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

In CSS just use:

img {
    opacity: value;
}

Needs to be a value 0-1. 0 is completely transparent, 1 is opaque, 0.5 would be average. :)

Answer 3

Put jQuery on your site and write this:

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

Answer 4

you can use css property opacity = 0.5; filter:alpha 50 for IE;

Answer 5

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....