Comment puis-je faire une image semi-transparente?

Supposons que j'ai une image qui est un cercle noir PNG. (fond transparent, cercle noir au milieu)

Je veux placer ce cercle noir sur le dessus d'un peu de texte, mais je veux le rendre semi-transparent. Comment puis-je le faire en CSS, ou photoshop? Ou quoi?

Mes parents sont les conducteurs de camions (vraiment) et croyez-moi, vous ne voulez pas être transparente pour un semi. Ils font du mal. ( désolé je ne pouvais pas m'en empêcher :X )
gardez à l'esprit que le fait de placer l'image sur le texte est probablement une mauvaise idée, car il peut interférer avec la capacité des utilisateurs à sélectionner le texte et cliquer sur les liens dans le texte.

OriginalL'auteur TIMEX | 2011-02-22

  1. 8

    Voici comment je pourrais le faire.

    Voir un exemple de travail à 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)";
}
    +1 pour l'ici est l'endroit où vous définissez l'opacité de la mauvaise navigateur commentaire. Bien joué monsieur!
    Avez-vous essayer sur la "mauvaise" navigateur? Ne semble pas fonctionner.

    OriginalL'auteur jessegavin

  2. 3

    En CSS suffit d'utiliser:

    img {
    opacity: value;
}

    Doit être une valeur de 0-1. 0 est complètement transparent, 1 est opaque, de 0,5 serait à la moyenne. 🙂

    OriginalL'auteur McKayla

  3. 1

    Mettre jQuery sur votre site et écrire ceci:

    <script>
     $(document).ready(function() {   
      $("div.circle").css({ opacity: 0.5 });
});
</script>
    pourquoi les frais généraux de jquery lorsque vous pouvez le faire avec du css? Et tout ce qui est fait est juste de changer le css de la propriété de toute façon :/

    OriginalL'auteur Obi-wan

  4. 0

    vous pouvez utiliser la propriété css opacity = 0.5; filter:alpha 50 pour IE;

    pour une image..?
    pourriez vouloir utiliser -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); pour IE8, même si le filtre est censé être pris en charge trop
    il faut la mettre sur le dessus d'un texte?? Ensuite, vous pourriez avoir besoin de considérer le z-index et l'utilisation de la position absolue. consultez chevauchement position dans w3schools.com/css/css_positioning.asp . En passant , vous pourriez envisager de toile.

    OriginalL'auteur DrStrangeLove

  5. 0

    Dans photoshop maintenir le cercle au-dessus de la couche de texte. ensuite, sélectionnez la couche de cercle & dans les options de la couche de réduire sa transparence en faisant glisser le curseur. OU appuyez simplement sur des chiffres sur le pavé numérique du clavier 0= entièrement opaque, 9=10 % d'opacité & etc....

    OriginalL'auteur Ruheet