Couche transparente de texte sur une image

J'ai le balisage suivant:

<div class="photo" style="float: left; margin: 2px;">
    <a href="#">
        <img src="images/image.jpg" alt="My Image" height="240" width="240" />
    </a>
</div>

Comment puis-je créer un calque en haut de l'image où je peux écrire un texte? La couche doit avoir de la transparence, être aligné en bas et ayant une taille de 240x60?

Merci!

Est-ce que vous avez besoin : jsfiddle.net/EgLKV/357 ?

OriginalL'auteur Lorenzo | 2013-03-07

  1. 3

    Pourquoi ne pas en faire l'image de fond?

    <div class="photo" style="float:left; margin:2px">
    <a href="#" style="background:url('images/image.jpg');
          width:240px; height:240px; display:inline-block;">Your text here</a>
</div>

    La display:inline-block vous permet de demander la largeur et la hauteur d'un élément inline, mais ici, vous pouvez même souhaitez simplement utiliser display:block comme il est le seul enfant du conteneur.

    EDIT: Vous pouvez même mettre plus de conteneurs en elle, quelque chose comme ceci:

    <div class="photo" style="float:left; margin:2px">
    <a href="#" style="background:url('images/image.jpg'); position:relative;
          width:240px; height:240px; display:block;">
        <span style="display:block;position:absolute;bottom:0;left:0;right:0;
              background:white;background:rgba(255,255,255,0.25);">Your text here</span>
    </a>
</div>
    Merci pour votre réponse. Comment puis-je obtenir une transparence partielle de l'arrière-plan de texte?
    Voir mon edit. 😉

    OriginalL'auteur Niet the Dark Absol

  2. 1

    Des blocs de texte sur les images. Site web et la démo comme suit:

    http://css-tricks.com/text-blocks-over-image/

    OriginalL'auteur JerryHuang.me

  3. 1

    Je vais faire comme avec une image conteneur comme ça :

    Html

    <div class="image-container">
    <img src="path/to/image" />
    <p class="caption">My text</p>
</div>

    CSS

    .image-container {
    position:relative;
}

.caption {
    width:100%;
    background:rgba(0,0,0,0.5);
    color:#ffffff;
    position:absolute;
    top:0;

}

    Voir violon !

    OriginalL'auteur soyuka

  4. 1

    Balisage

    <div class="figure-container">
    <img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
    <span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>

<div class="figure-container">
    <img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
    <span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>

    Feuille de style

    .figure-container 
{
    position: relative;  
    display: inline-block;
}

.figure-label
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: White
}

    J'ai créé un JSFiddle ici http://jsfiddle.net/AbBKx/ montrant comment absolument position d'un élément enfant (label) par rapport à un conteneur parent.

    OriginalL'auteur Eric