web-dev-qa-db-fra.com

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

J'ai deux divs, les deux avec une opacité de 0,6. J'ai besoin qu'ils se chevauchent mais conservent leur opacité et ne créent pas un nouveau niveau d'opacité combiné. Je ne peux pas utiliser une image. 

EDIT - Le petit cercle est supposé contenir un élément canvas. Je ne sais pas si les pseudo-éléments seraient la meilleure solution.

Est-il possible de faire cela avec CSS ou devrais-je simplement utiliser canvas?

exemple -

http://dabblet.com/Gist/1566209

HTML:

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

CSS:

/**
 * Double Opacity
 */
body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
}
cssopacitycss-shapes
29
tripleZee

SOMMAIRE:

En fonction des besoins, cela peut s'avérer 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 créé un motif noir/transparent pour le cercle et l'ai défini sur :before.
  2. Le cercle est alors transformé rotate(180deg) et déplacé pour tenir sur Le coin du <div>.
  3. Ensuite, je règle la opacity de ce cercle sur 0.6.
  4. Le <div> lui-même n'est pas affecté par la opacity.
  5. Ensuite, j'ai ajouté l'élément :after et mis une image sous la forme 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 à quel point il était facile et indépendant de contrôler cet élément .
  7. J'ai utilisé un fond plus clair et mis la opacity à 0.3 pour montrer Le résultat

VOICI LE FIDDLE: _ { http://jsfiddle.net/pixelass/nPjQh/4/

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

chacun de ces exemples utilise uniquement un seul élément div

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

position = absolue;

top = circleHeight/-2;

left = circleHeight/-2; // (gauche = top) 

rotation = 180 °;

opacité = valueAofBackground;

bgColor = valeurRGBofBackground;

#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 originale commentée 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 une div entièrement transparente ... le cercle est un "pacman" - shape: http://jsfiddle.net/pixelass/nPjQh/14/

pacman shaped circle

Gérer le décalage du cercle

Regardez ces exemples qui gèrent le décalage du cercle ( NE PAS UTILISER PSEUDEO-ELEMENTS )

Copie 1: 1 du code de l'OP (15px offset): http://jsfiddle.net/pixelass/nPjQh/12/

Avec un décalage 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ôler le background-size par rapport à top et left

Règles :

en haut = à gauche;

background-size = elementHeight * 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/

one div makes a flower

PROBLÈME ACTUEL

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

Si vous n'utilisez pas un autre calque comme indiqué dans les exemples en haut du message, le contenu sera transparent. Donc, si vous n’avez besoin que d’une image à l’intérieur du cercle, les exemples ci-dessus fonctionneront correctement. 

conent is transparent

COMMENT RESOUDRE CE NUMERO

Si vous avez besoin d'une toile ou d'une autre div à l'intérieur du cercle, vous devez placer le cercle sur la div et superposer celle-ci sur le cercle.

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

changez un peu et ça marchera bien. OBTENIR LE CODE DU FIDDLE

correcting the opacity issue

Forme différente/Style avancé

Si vous utilisez une forme différente avec des côtés plats, vous pouvez même placer une bordure autour de la somme des deux div. Ou même ajouter une ombre

toujours en utilisant le balisage simple de .... 

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

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

adding a box-shadow

Applique une bordure au cercle

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

border on round element

Plus d'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>

4 circles

Utilisation de cette technique pour créer une info-bulle

_ { 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>

css tooltip

37
user950658

Je pense que le seul moyen serait de faire l'opacité séparément,

par exemple, http://dabblet.com/Gist/1566278

10
Andrew

Réponse révisée

Ce violon estcompatible avec IE9et résout la duplication de l'arrière-plan nécessaire dans ma réponse d'origine. Il utilise des pseudoéléments pour générer le cercle. Cette solution dérive de l'idée "pacman" de pixelass, au lieu d'utiliser le plus récent gradient css à générer, elle utilise l'ancienne propriété (et peu utilisée ou comprise ) clip pour créer le cercle en deux parties. Cela a résolu le problème de votre cercle ne pas être "centré" au coin.

#foo {
    height:150px;
    width:250px;
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    left:40%;
    top:20%;
}

#bar {
    height:40px;
    width:40px;
    position:absolute;
    top:-15px;
    left:-15px;
    line-height: 40px;
}

#bar:before,
#bar:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 40px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

#bar:before {
    clip: rect(0 40px 15px 0);
}

#bar:after {
    clip: rect(15px 15px 40px 0);
}

Réponse originale

Vous pouvez le faire ( voir violon ). Il pousse le cercle ci-dessous et "superpose" la partie qui chevauche un pseudoélément pour rétablir la couleur d'arrière-plan du corps:

body{background:green;}

#foo{
height:150px;
width:250px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
left:40%;
top:20%;
}

#bar{
height:40px;
width:40px;
background:rgba(0, 0, 0, 0.6);
border-radius:40px;
position:absolute;
top:-15px;
left:-15px;
z-index: -1;
}

#bar:after {
    content: '';
    display: block;
    background: green;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
}
2
ScottS

Que diriez-vous de ceci: http://jsfiddle.net/rudiedirkx/TqRCw/

(L'éditeur de Dabble est nul !!)

Cela ne peut pas être fait avec seulement des pseudo-éléments, malheureusement = (

Cela peut être fait avec seulement des pseudo-éléments! Voir la réponse de pixelass. CSS3 est une exigence cependant.

2
Rudie

J'ai créé un Q/A pour gérer ce scénario avec le survol de tels éléments superposés.

Chevauchement des éléments avec opacité et traitement du "survol" de ceux .

La solution consiste essentiellement à définir l'opacité dans le niveau parent à la place directement sur les éléments enfants et à les basculer avec le survol, avec JS.

HTML

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

J'espère que cela t'aides. 

0
Gibin Ealias