chevauchement image de fond

Question

J'ai une table avec une image d'arrière-plan en utilisant la propriété css background-image. Dans le tableau, j'ai quelques images en utilisant le <img. Images <img sont au-dessus de l'image de fond. Je voudrais que l'image d'arrière-plan remplace les images <img comme avec le texte. Est-ce possible?

Exemple de code:

<style> 
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style> 

<table id="content"> 
<tr> 
    <td>Some text.....text.....text 
    Image: <img src="quadrado.jpg" /> 
    </td> 
</tr> 
</table> 

Answer 1

"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark" 

On dirait que vous voulez un overlay. Vous ne pouvez pas faire cela avec juste CSS.
Mais vous pouvez venir à proximité en ajoutant des styles comme ceci:

#content 
{ 
    opacity:   0.8; 
    -ms-filter:   "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    filter:    alpha(opacity=80); 
} 
#content img 
{ 
    opacity:   0.8; 
    -ms-filter:   "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    filter:    alpha(opacity=80); 
} 

.
Pour plus d'une véritable superposition, vous devez le coder dans votre code HTML ou utiliser javascript pour l'ajouter à la volée.

Jetez un oeil à this page. Il utilise javascript pour générer des superpositions pour les blocs de la classe OverlayTheBackground.

Il existe également jQuery plugins that are supposed to generate overlays.

---

Peut-être poster une image de ce que vous voulez.

Mais, il semble comme tout ce que vous devez faire est d'ajouter ce style:

#content img {visibility: hidden;} 

Answer 2

Je ne suis pas sûr que je comprends la question complètement, mais si vous voulez que l'image d'arrière-plan pour montrer à travers des parties des images de contenu, vous devez utiliser de la PNG ou GIF comme ils permettent à certaines parties de l'image d'être transparentes et de ne pas faire de jpg.