Как сделать изображение полупрозрачным?

Question

Предположим, у меня есть изображение, которое представляет собой черный кружок PNG.(прозрачный фон, черный круг посередине)

Я хочу поместить этот черный круг поверх текста, но хочу сделать его полупрозрачным.Как я могу сделать это в CSS или фотошопе?Или что?

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

В фотошопе держите кружок над текстовым слоем.затем выберите слой круга и в параметрах слоя уменьшите его прозрачность, перетаскивая ползунок.ИЛИ просто нажмите цифры на цифровой клавиатуре 0 = полная непрозрачность, 9 = 10% непрозрачность и т. Д ....

Answer 5

вы можете использовать css свойство opacity = 0.5;фильтр: альфа 50 для IE;