How to make the image translucent?

Question

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

I want to put this black circle on top of some text, but I want to make it translucent. How can I do this in CSS or Photoshop? Or what?

Answer 1

Here is how I can do it.

See a working example in 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 where you set the opacity */
    opacity: .5;

    /* Here 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;
}

A value of 0-1 is required. 0 is completely transparent, 1 is opaque, 0.5 will be medium. :)

Answer 3

jQuery :

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

Answer 4

css opacity = 0.5; : 50 IE;

Answer 5

In Photoshop, hold the circle above the text layer. then select the circle layer, and in the layer settings, reduce its transparency by dragging the slider. OR just press the numbers on the numeric keypad 0 = full opacity, opacity 9 = 10%, etc ...