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中，将圆圈保持在文本图层上方。然后选择圆圈层＆amp;在图层选项中通过拖动滑块来降低其透明度。或者只需按键盘数字键盘上的数字0 =完全不透明，9 = 10％不透明度＆amp;等等......

如何使图像半透明？

5 个答案: