La question est très étrange en effet, alors laissez-moi vous expliquer avec un extrait:
p>
<div class="container">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay">
Content
</div>
</div>3 Réponses :
Ceci est possible avec un masque d'image à l'aide d'un gradient radial (non supporté par IE ou Edge p>
<div class="container">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay masked-circle">
Content
</div>
</div>Dans ce cas, vous pouvez simplement utiliser le gradient comme arrière-plan au lieu de masque et vous aurez un meilleur support
Sur mon écran, il rend très mal (tous floues, comme enlever le fond sur une image) et supprime le cercle blanc. est-ce normal ?
Vous pouvez donner le :: avant une ombre grise pour remplir le p> .overlay code>. Le .overlay code> avoir débordement: masqué; code> de sorte que l'ombre reste à l'intérieur.
<div class="container">
<div class="overlay">
Content
</div>
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
</div>
C'est aussi une solution de contournement: je n'ai pas besoin de faire correspondre la couleur de l'arrière-plan, j'ai besoin du cercle sur Punch à travers la boîte de contenu (ce qui signifie que l'arrière-plan doit être transparent).
@trichetriche L'arrière-plan est transparent avec cette solution, changez-le et vous verrez
Inech, mon mauvais, désolé :) Mais la frontière du avant est partie, existe-t-il un moyen de le réparer?
Je crains que vous ne puissiez pas puisque le parent a débordement: caché . Cependant, vous pouvez ajouter un : avant sur le . conteneur simuler la bordure
J'ai mis à jour ma réponse. J'ai ajouté la bordure blanche comme un :: avant sur .pin
Étant donné que la superposition appartient à l'élément, vous pouvez envisager une variable de gradient radial et CSS afin d'avoir quelque chose de dynamique (sans bordure).
J'ai retiré la broche pour la simplicité mais vous pouvez facilement ajuster sa position pour le faire à l'intérieur Le cercle ou l'utiliser comme arrière-plan d'élément de superposition: p>
p>
<div class="container">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay">
Content
</div>
</div>
<div class="container" style="--top:50px;--left:5px;--radius:30px;">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay" >
Content
</div>
</div>
<div class="container" style="--top:50px;--left:5px;--radius:30px;">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay" >
Content
</div>
</div>
<div class="container" style="--top:50px;--left:50px;--radius:40px;">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay" >
Content
</div>
</div>
<div class="container" style="--top:50px;--left:120px">
<div class="pin">
<svg width="24" height="36" viewBox="0 0 192 290" xmlns="http://www.w3.org/2000/svg">
<path d="
M11 138
a 94 94 0 1 1 170 0
l -85 150
l -85 -150
" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.9" opacity="0.9" />
</svg>
</div>
<div class="overlay" >
Content
</div>
</div>Vous ne répondez pas vraiment à ma question: mon cas d'utilisation est que j'ai une broche sur une carte (qui est dans une toile, donc je ne peux pas le toucher). Le contenu est placé à exactement le même pixel. La broche est activée: avec certains CSS, je peux l'ajuster, et je voudrais encercler le pin avec un arrière-plan transparent . Comme si le cercle avait perforé à travers la boîte de contenu. Bien que j'ai appris quelque chose, je ne peux pas l'utiliser, car c'est une solution de contournement non adaptée à moi, et pas une solution: /
@trichetriche Dans ce cas Modifier votre question avec le véritable cas d'utilisation. Je réponds en fonction de votre question et de ce que vous avez décrit, non basé sur le cas d'utilisation que je ne vois pas.
J'ai décrit un cas d'utilisation de punch-trhough. Si je voulais la même couleur, j'aurais dérangé et utilisé une variable pour la définir à la même couleur ... Et aussi, si j'avais voulu un gradient, j'aurais dit si ...
@trichetriche Le gradient est simplement ici pour illustrer la transparence, il peut s'agir d'une image ou d'une carte, de sorte que le grassouce n'a rien à voir avec la solution. Et où vous voyez une couleur ici? Le cercle est transparent et poinçonnage à travers le fond de l'élément de contenu comme vous avez décrit
Si vous retirez les propriétés de fond, cela cesse de fonctionner. Cette solution est basée sur des couleurs, qui n'est pas posée ni adaptée à mon cas (par conséquent, pourquoi je n'en ai pas parlé). De plus, la broche est immuable, ce qui signifie qu'il ne peut pas être déplacé ou utilisé comme une propriété CSS: il est dans une toile , donc je ne peux donc pas le manipuler. C'est encore une solution de contournement, pas une solution (mais merci, j'apprends toujours quelque chose).
@trichetriche Modifiez votre question à inclure toutes ces informations, alors, rien n'indique que vous n'utiliserez pas de couleur unie pour votre contenu, alors j'ai fourni une solution basée sur cela. Et pour le code PIN, je fabriquai simplement l'effort pour réduire le code de sural de sural (à nouveau basé sur la question non pas le cas d'utilisation). Vous pouvez facilement garder la goupille à l'extérieur. Vérifiez la mise à jour, j'ai ajouté une autre méthode basée sur votre exigence, mais à nouveau, ils doivent être reflétés dans votre question. Il n'y a rien de générique dans le CSS et tout est en train de contourner sur chaque situation.
Et WebKit ne peut pas être utilisé sur tous les navigateurs ... C'est à nouveau une solution de contournement que je ne peux pas utiliser: / et je n'ai pas besoin d'indiquer que je n'ai pas besoin d'une solution de contournement ou que certaines propriétés sont interdites. J'ai demandé une solution et j'ai décrit le mieux que je pouvais (je ne suis pas un orateur natif). Si je devais décrire tout ce que vous ne pouvez pas utiliser, vous ne le lire même pas ... et oui, il y a des choses génériques dans CSS, bien sûr! Tout n'est pas une solution de contournement. Et si j'y voulais un, j'aurais demandé que, pas une solution ... je suis grandi, je peux entendre qu'il n'y a pas de solution à mon problème, je ne pleurerai pas :)
@trichetriche Tous les navigateurs : encore une fois, quelque chose n'a pas dit dans votre question. Eh bien, je vais laisser celui-ci, car je suis sûr que si j'ajoute une autre façon dont vous m'avez dit que vous voulez soutenir l'ancien, etc.). Au fait, une solution et une solution de contournement sont les mêmes et oui, rien de générique dans CSS. Chaque situation nous conduirons à une solution particulière. Quoi qu'il en soit, bonne chance, probablement quelqu'un d'autre d'autre avec la solution générique que vous recherchez (comme note latérale, le masque peut être utilisé sans webkit ( développeur.mozilla.org/en-us/docs/web/css/mask-Image ), Il peut également être changé avec SVG)
Mais c'est évident! Sauf indication contraire, vous devez toujours coder avec tous les navigateurs à l'esprit ... et non, les solutions et les solutions de contournement ne sont pas identiques. Je n'ai pas envie de vous l'expliquer, c'est encore assez évident ... je suis d'accord, je suis une douleur dans le cul, désolé de ça, et merci de votre contribution quand même, parce que j'ai appris quelque chose de nouveau. Je vais regarder dans le masque et son soutien et voyez s'il correspond à mon besoin. Je ne peux pas accepter votre réponse (encore?), Mais je vous ai déjà donné un uvot déjà pour le problème. Merci encore pour votre aide !
Désolé @trichetriche mais je dois être en désaccord avec votre commentaire Vous devez toujours coder avec tous les navigateurs à l'esprit . Si vous devez soutenir les navigateurs plus âgés, il est de votre responsabilité de l'énoncer comme une exigence à l'avance dans votre question.
@ksav Pas toutes les versions de navigateur, tous les navigateurs . Si vous ne ciblez que Chrome, c'est déjà 1/3 des grands navigateurs. Si je veux un soutien sur IE6, je conviens que cela est suffisamment spécifique à être mentionné. Mais webkit? Allez ...
faire le fond du cercle de la même manière que le fond principal?
@Tmaniafif Je pensais que je n'avais pas eu à indiquer l'évidence ... La broche est sur une carte et j'aimerais qu'elle soit transparente.
est-ce approprié .com / questions / 8503636 / ... ?
@Tmaniafif non, si vous augmentez la largeur du rectangle sur le jsfiddle, vous verrez qu'il dépensera sous le cercle: J'en ai besoin pour expliquer à la moitié du cercle (visuellement, la moitié du cercle doit être dans la zone de contenu, l'autre moitié devrait être en dehors de la boîte de contenu).
Je vois ce que vous alliez ici, mais vous avez besoin d'un meilleur exemple. Au lieu de commencer comme un mystère de meurtre («assez curieux»), commencez par un rendu de ce que vous vouliez, carte et tout. Il clarifiera aux lecteurs que le cercle blanc sur la chose semble frapper sur fond blanc, n'est pas une solution suffisante.