Faire de l'image à l'intérieur d'une div qui apparaissent derrière son div arrière-plan

J'ai un div qui a de fond qui est en partie transparent avec un filigrane. À l'intérieur de la div, je suis à l'appel d'une image, mais je veux que l'image apparaisse derrière le fond de la div pour que je puisse avoir le filigrane transparent div arrière-plan apparaissent sur l'image. Est-ce possible? Voici le css que j'ai qui ne fonctionne pas...

.artist-container {
background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    z-index:331;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:330;
    position:relative;
}

Si vous souhaitez un fond pour votre arrière-plan, de sorte que vous pouvez l'arrière-plan pendant que vous êtes à la semi-finition? Yo dawg...
Vous pouvez ainsi appliquer un filigrane à la volée avec PHP: [stackoverflow.com/questions/4426207/... [1]: stackoverflow.com/questions/4426207/...
Vous ne devriez vraiment pas faire de cette façon. Une image n'est pas vraiment en filigrane, à moins que le filigrane est une partie de l'image. Si elle n'est pas combinée, n'importe qui pouvait encore facilement il suffit d'enregistrer l'image derrière le filigrane et l'original.

OriginalL'auteur Pollux Khafra | 2012-02-03

2

En donnant .artist-container un z-index supérieur, vous faites de plus en plus haut dans l'ordre d'empilement de l'enfant de l'image, mais les enfants ont toujours un z-index supérieur que leurs parents.

Si vous voulez donner un effet de filigrane, vous pouvez:
1. Faire de l'image de l'arrière-plan de la div et de placer une image en filigrane à l'intérieur.
2. Position d'un autre div dans .artist-container absolument, avec les mêmes dimensions que celui de l'image et avec un z-index supérieur de l'image, avec le filigrane à l'arrière-plan.
Cela supprime le contenu sémantique de l'image, comme il sera toujours un filigrane d'image (images de fond ne s'affichent pas lors de l'impression, par exemple).

OriginalL'auteur Sagar Patil

J'ai préparé un petit échantillon à l'aide de certaines travées, qui ne sera pas ajouter de tout contenu sémantique de votre document et toujours conserver la sémantique de votre image.

HTML:

<span class="cover_contain">
   <img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
   <span class="cover_image"></span>
</span>

CSS:

span.cover_contain {
    display: inline-block;
    position: relative;
}
span.cover_image {
    display: block;
    background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

jsFiddle Aperçu en Direct

OriginalL'auteur animuson

0

faire de l'image en tant qu'image de fond d'écran de la div et le filigrane que l'img

Cela supprime le contenu sémantique de l'image, comme il sera toujours un filigrane d'image (images de fond ne s'affichent pas lors de l'impression, par exemple).
Merci les gars. Je l'ai eu à travailler.
oui... mais vous ne pouvez pas avoir l'image de fond d'un div en face de tout ce qui est à l'intérieur. Vous seriez presque besoin d'une autre div en face de la div et de l'arrière-plan de l'image de celui d'être le filigrane

OriginalL'auteur Mikey G
0

il n'est pas possible de mettre un fond en face d'une image de l'image est dans cet élément. Vous pouvez simplement utiliser l'image comme arrière-plan, ou:

ce que vous pourriez faire
```
<div class="holder">
    <img src=".." class="main_image">
    <img src=".." class="watermark">
</div>

.holder {
    width:100px;
    height:100px;
    position:relative;
    display:block;
 }

 .main_image {
     position:absolute;
     top:0;
     left:0;
     z-index:0;
 }
.watermark {
     position:absolute;
     top:0;
     left:0;
     z-index:9;
 }
```
L'arrière-plan n'est pas tellement un filigrane que c'est un arrière-plan transparent avec des effets que je veux sur l'image. L'image est appelée avec php et de changements donc je ne peux pas définir l'origine de la div de l'image d'arrière-plan. Ma conjecture est que à la place de la div, en vertu de l'image et lui donner un négatif de la marge supérieure de chevauchement. Est-ce la seule option?

OriginalL'auteur driedoezoe

Vous pouvez utiliser le négatif z-index, mais dans ce cas, vous avez le wrapper de ne pas avoir tout z-index. C'est l'une des caractéristiques de l'empilement contexte.

Voici une démo de violon: http://dabblet.com/gist/1731538

Et le code pour vous serait quelque chose comme ceci:

.artist-container {
    background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:-1;
    position:relative;
}

OriginalL'auteur kizu

Vous devez vous connecter pour publier un commentaire.