comment gérer la "double opacité" de deux divs se chevauchant

---

résumé:

---

Selon ce qui est nécessaire, il peut être délicat, mais l'approche de base est assez simple.

---

---

j'ai écrit un article entier à ce sujet ici:

il pourrait être plus facile à lire.

http://dream-world.us/2012/01/07/overlapping-transparent-divs-with-one-border /

---

---

Cette approche est un peu différente de ma première pensée... mais cela a le même résultat.

1. j'ai fait un motif noir / transparent pour le cercle et l'ai fixé à :before .
2. Le cercle est alors transformé rotate(180deg) et déménagé pour s'installer sur la le coin du <div> .
3. puis j'ai mis le opacity de ce cercle à 0.6 .
4. le <div> lui-même n'est pas affecté par le opacity .
5. ensuite j'ai ajouté l'élément :after et j'ai mis une image comme background (vous pouvez le contrôler via js si nécessaire)
6. j'ai ajouté quelques effets à l'image ( border-radius , box-shadow , border ) pour montrer comment cet élément peut être facilement et indépendamment géré.
7. j'ai utilisé un fond plus léger et j'ai mis le opacity à 0.3 pour montrer le résultat

voici le violon: http://jsfiddle.net/pixelass/nPjQh/4 /

Regardez cette version pour quelques résultats fous: http://jsfiddle.net/pixelass/nPjQh/5 /

chacun de ces exemples n'utilise qu'un seul élément div 1519320920"

règles de base. (ces règles "pourraient" être utilisées pour créer un comportement dynamique avec js)

position = absolu;

top = circleHeight / -2;

gauche = circleHeight / -2; //(à gauche = en haut)

rotation = 180deg;

opacity = valeuraofbackground;

bgColor = valueRGBofBackground;

#inner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
    padding:20px;
    border-radius: 20px;
    border-top-left-radius: 0;
}
#inner:before {
    content: "";
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    height: 40px;
    width: 40px;
    border-radius: 40px;
    position: absolute;
    top: -20px;
    left: -20px;
    -webkit-transform: rotateZ(180deg);
    opacity:0.3;
}
#inner:after {
    content: "";
    background: url('http://lorempixel.com/10/10/sports/1/') no-repeat;
    background-position:0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    position: absolute;
    top: -6px;
    left: -6px;
    -webkit-box-shadow: 0 0 10px rgb(255,255,255);
    border: 1px rgb(255,255,255) solid;

}

---

meilleure explication

---

version commentée originale http://jsfiddle.net/pixelass/nPjQh/10 /

voir les commentaires dans le code ci-dessous

#inner {
background: rgba(0,0,0,0.5) /*this is the full color-code of the div (with alpha)*/
}
#inner:before {
    /*the solid color of the circle = rgbValue of the div*/
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    /*opacity of the circle = alpha of the div*/
    opacity: 0.5;
}

cet exemple a un div entièrement transparent ...le cercle est un "pacman" - forme: http://jsfiddle.net/pixelass/nPjQh/14 /

---

gestion de l'offset du cercle

---

regardez ces exemples qui gèrent le décalage du cercle ( N'utilisant pas de pseudo-éléments )

copie 1:1 de l'OP du code (15px décalage): http://jsfiddle.net/pixelass/nPjQh/12 /

avec un offset beaucoup plus petit (5px): http://jsfiddle.net/pixelass/nPjQh/13 /

(le contenu a la même opacité que le cercle)

Comment fonctionne l'offset?

contrôle le background-size vs. Le top et left

Règles :

haut = gauche;

background-size = élémentheight * 2 + top * 2;

regardez la fleur (c'est aussi un seul <div> avec des pseudo-éléments) le background-size est plus grand que le cercle. qui crée les feuilles vertes sur le fond

http://jsfiddle.net/pixelass/nPjQh/15 /

---

PROBLÈME ACTUEL

---

voir ce violon: http://jsfiddle.net/pixelass/nPjQh/16 /

si vous n'utilisez pas une autre couche comme dans les exemples en haut du post, le contenu sera transparent. Donc, si vous n'avez besoin que d'une image à l'intérieur du cercle, les exemples ci-dessus fonctionneront très bien.

COMMENT RÉSOUDRE CE PROBLÈME

si vous avez besoin d'une toile ou d'une autre div à l'intérieur du cercle, vous devez mettre le cercle sur la div et couche la div nécessaire au-dessus du cercle

voir ce violon: http://jsfiddle.net/pixelass/nPjQh/17 /

change un peu et ça marchera très bien. OBTENIR LE CODE DU VIOLON

---

forme différente / Style avancé

---

Si vous utilisez une forme différente avec les côtés plats, vous pouvez même mettre une bordure autour de la somme des deux divs.. ou même ajouter un box shadow

utilise toujours le simple markup de....

<div id="foo">
    <div id="bar">
    </div>
</div>

voir le violon pour la boîte-ombre: http://jsfiddle.net/pixelass/nPjQh/21 /

---

appliquer une bordure au cercle

---

en utilisant -webkit-mask-image nous pourrions ajouter une bordure au cercle. http://jsfiddle.net/pixelass/nPjQh/24 /

---

autres exemples:

---

quatre cercles autour de la div

http://jsfiddle.net/pixelass/nPjQh/25 /

Balisage:

<div id="foo">
    <div id="bar1"></div>
    <div id="bar2"></div>
    <div id="bar3"></div>
    <div id="bar4"></div>
</div>

En utilisant cette technique pour faire un tooltip

http://jsfiddle.net/pixelass/nPjQh/31 /

Balisage:

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>