Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Ce farmacie VET online care "...

De unde cumparați legume si fructe?

Samsung S21 ultra

Plasa de umbrire peste gard de pl...
 O smecherie pe care nu o inteleg

Balcon parter fara acte

unde gasesc un speed bag in bucur...

Programe TV cu altfel de sporturi
 Laptop "bun la toate" max...

navigatie noua vw tiguan

ctfmon.exe - System Error (in Saf...

Ați prins vremurile cand 120 Volț...
 Whatsapp nu afișeaza numele ...

Medii admitere Politehnica Bucure...

Se extinde Baza de la Kogalniceanu

Politist mutilat de caine in curt...
 

CSS - E posibil sa ignori opacitatea parintilor?

- - - - -
  • Please log in to reply
9 replies to this topic

#1
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013
Salut,

As vrea sa fac o imagine sa fie acoperita complet de un overlay cu transparenta de 0.4 si apoi sa reusesc sa decupez din overlay-ul asta niste bucati care sa descopere imaginea originala adica fara nici un fel de opacitate.

Am tot citit de cateva ore sa inteleg mai bine si toate raspunsurile spun ca trebuie sa folosesti pentru parinte background-color: rgba(0,0,0,.4) si apoi pentru copil trebuie sa folosesti background-color: rgba(0,0,0,0) adica transparent complet. Dar asta dupa parerea mea nu functioneaza.

Am mai citit ca opacitatea/transparenta nu s-ar mosteni dar ca e un fel de post-rendering.

M-am uitat deja la 20 de stackoverflow pe tema asta, si 20 de jfiddle dar nu am gasit nimic care sa mearga efectiv.

Exemplul meu de html este
<html>
<head>
<link rel="stylesheet" href="overlay.css">
</head>
<body>
<div class=container>
  <img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l">
  <div id=overlay>Overlay text
 
   <div class="jigsaw1">
   </div>
  </div>
</div>
</body>
</html>



Apoi css-ul este
#overlay {
  padding:10px;
  inset:0;
  position:absolute;
  background-color:rgba(255,255,255,0.4);
  }
 
 
.jigsaw1 {
background-color:rgba(255,255,255,1);
font-size: 12px;
  width: 6em;
  height: 6em;
  margin: 50px;
  position: relative;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
}



Am creat si un jfiddle
https://jsfiddle.net/bujvko9s/

Am pus si in css-ul de mai sus si in jfiddle opacitatea 1 ca sa se vada acel patrat. Daca schimb opacitatea la 0 a lui jigsaw in css
background-color:rgba(255,255,255,0);

opacitatea ramane cea a parintelui adica a lui overlay la 0.4.

Este posibil sa decupezi din opacitatea parintelui si sa dezvalui sa apara imaginea initiala fara nici o opacitate? Ca si cand ai pune o hartie semitransparenta peste o imagine si apoi decupezi o gaurica in forma de inimioara din ea si apoi prin gaurica aceea imaginea o sa se vada fara nici o opacitate.

Va multumesc
P.S. mai sunt si alte mici probleme pe care le ignor deocamdata cum ar fi faptul ca overlay-ul nu acopera imaginea total. Dar sunt la inceput cu css-ul o iau pas cu pas

#2
sags

sags

    Senior Member

  • Grup: Senior Members
  • Posts: 9,815
  • Înscris: 24.04.2013
Tare titlul! Tocma’ ce ma pregateam de o lupta intre generatii mai ceva ca la swartze-negru, am luat si galetusa cu floricele, da’ cand deschid topicu’ ce sa vezi? CSS. M-am dezumflat.

Acu’ sa trecem la subiect. Asa cum enunti problema nu [cred ca] se poate.

Ceea ce cred ca se poate este clip-path aplicat pe elementul in care vrei sa faci ‘gaura’, adica de la bun inceput acesta sa nu acopere deloc anumite portiuni. Uite exemple si discutie aici <https://css-tricks.c...ng-masking-css/>. Daca forma e mai complicata poti folosi chiar un SVG care sa o descrie. Tot acolo prezinta si optiunea de a folosi masti.

Alta idee este urmatoarea: faptul ca un element se vede a fi peste un altul nu inseamna ca elementul de dedesubt ii este parinte. Asa ca elementul pe care il vrei suprapus opac (de exemplu, sa nu ‘asculte’ de transparenta elementului de sub el) il definesti in ierarhia HTML ca fiind ‘alaturi’, nu ‘subordonat’, fata de cel transparent de dedesubt si folosesti CSS pentru a-l pozitiona peste cel din urma. Ideea cu exemplu cu tot aici <https://css-tricks.c...arent-elements/>.

Edit: Scuze, am dat din greseala ‘Publica’ fara sa termin de scris/ formulat mesajul cum vroiam.

Edited by sags, 04 February 2023 - 11:22.


#3
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013

View Postsags, on 04 februarie 2023 - 11:13, said:

Tare titlul! Tocma’ ce ma pregateam de o lupta intre generatii mai ceva ca la swartze-negru, am luat si galetusa cu floricele, da’ cand deschid topicu’ ce sa vezi? CSS. M-am dezumflat.

Acu’ sa trecem la subiect. Asa cum enunti problema nu [cred ca] se poate.

Ceea ce cred ca se poate este clip-path aplicat pe elementul in care vrei sa faci ‘gaura’, adica de la bun inceput acesta sa nu acopere deloc anumite portiuni. Uite exemple si discutie aici <https://css-tricks.c...ng-masking-css/>. Daca forma e mai complicata poti folosi chiar un SVG care sa o descrie. Tot acolo prezinta si optiunea de a folosi masti.

Alta idee este urmatoarea: faptul ca un element se vede a fi peste un altul nu inseamna ca elementul de dedesubt ii este parinte. Asa ca elementul pe care il vrei suprapus opac (de exemplu, sa nu ‘asculte’ de transparenta elementului de sub el) il definesti in ierarhia HTML ca fiind ‘alaturi’, nu ‘subordonat’, fata de cel transparent de dedesubt si folosesti CSS pentru a-l pozitiona peste cel din urma. Ideea cu exemplu cu tot aici <https://css-tricks.c...arent-elements/>.

Edit: Scuze, am dat din greseala ‘Publica’ fara sa termin de scris/ formulat mesajul cum vroiam.

:D:) Da mi-am dat si eu seama dupa ce am postat ca putea fi interpretat mai filozofic titlul.

Multumesc frumos, am inceput sa citesc despre svg si pozitionare. E foarte interesant. Am impresia totusi ca e un domeniu vast svg-ul si am vazut ca sunt si animatii care pot fi facute, e foarte interesant.

Si cand ma gandesc ca am auzit de svg acum cativa ani buni, si pana acum credeam ca e o ciudatenie de forme geometrice :)

Revin aici cu intrebari daca nu va deranjeaza. Daca simtiti nevoia de discutat despre parinti putem sa vorbim si de asta :) dar poate in alt thread.

#4
sags

sags

    Senior Member

  • Grup: Senior Members
  • Posts: 9,815
  • Înscris: 24.04.2013
Nu e musai sa folosesti un SVG, vezi in pagina catre care am pus link. Merge si fara. Dar cand conturul e mai ‘artistic’, probabil e [mult] mai usor sa te folosesti de un software specializat de grafica vectoriala (de exemplu Inkscape e gratis) si sa exporti apoi in SVG decat sa stai sa calculezi si sa introduci de mana coordonate.

#5
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013

View Postsags, on 04 februarie 2023 - 17:04, said:

Nu e musai sa folosesti un SVG, vezi in pagina catre care am pus link. Merge si fara. Dar cand conturul e mai ‘artistic’, probabil e [mult] mai usor sa te folosesti de un software specializat de grafica vectoriala (de exemplu Inkscape e gratis) si sa exporti apoi in SVG decat sa stai sa calculezi si sa introduci de mana coordonate.


Eu ma gandeam la svg pentru ca as vrea sa aplic masca pe mai mute imagini, pe rand, adica pe o pagina o sa am numai o imagine, dar o sa am mai multe pagini si as vrea sa reflosesc acelasi mecanism/cod. Imaginile au marimi diferite, de aia ma gandeam eu la SVG ca ar fi scalabil nu?

Ma tot chinui la urmatorul html:
<html>
<head>
<link rel="stylesheet" href="overlay1.css">
</head>
<body>
<div class="el"></div>
</body>
</html>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #8f7a66;
}
.el {
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);
  -webkit-mask-size: 20px, 50px;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top center, bottom center;
  overflow:show;
}

Reusesc sa pozitionez cele doua stelute doar cu position-ul de mai sus, daca schimb si pun left ceter, right bottom, nu mai e vizibila nici una, si nici o alta combinatie nu merge nici procentaj nici numar fix de pixeli.

Va multumesc

Am reusit sa creez si un codepen
https://codepen.io/m...dor/pen/JjBxqRZ

#6
horny_hornet

horny_hornet

    Senior Member

  • Grup: Senior Members
  • Posts: 3,205
  • Înscris: 15.10.2020
Cred că cel mai simplu ar fi să folosești două imagini, una peste alta, prima imagine să fie normală, a doua cu opacitate și decupaje de care vrei, trebuie doar să le suprapui cu position absolute.

#7
horny_hornet

horny_hornet

    Senior Member

  • Grup: Senior Members
  • Posts: 3,205
  • Înscris: 15.10.2020
Exemplu:
Attached File  desktop_000.jpg   324.49K   12 downloads

#8
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013

View Posthorny_hornet, on 04 februarie 2023 - 19:27, said:

Exemplu:
Attachment desktop_000.jpg


Multumesc frumos, woow ai facut si un exemplu, multumesc.
presupun ca in exemplul tau decupajele sunt facute in imaginea 2.png? pentru ca nu vad nici un clip-path sau vre-un mask in codul tau.

Eu am reusit pana la urma niste decupaje:
https://jsfiddle.net/189bgfsy/
dar sunt tot cu svg.

Dificultatea pe care o am e ca cercul care e centrat pe 50% height si width, e defapt centrat pe 50% din viewport nu din imagine. Si eu as vrea sa-l centrez relativ la imaginea de dedesubt. Cum sa fac?

La exemplul de mai sus
https://codepen.io/m...dor/pen/JjBxqRZ
aici stelutele nu se vad cand pun mask-position pe left top, sau right-bottom. Este din cauza ca au un overflow?
Cum sunt la inceput incerc sa inteleg si ce nu merge, ca in teorie ar trebui sa mearga steluta centrata pe left top, dar de fapt nu merge si nu imi dau seama de ce...?

Va multumesc frumos!

#9
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013
Ce am mai citit intre timp e aparent ca nu poti de fapt sa aplici mai multr clip-path pe aceeasi imagine si ca trebuie sa folosesti in schimb un svg
https://stackoverflo...-with-clip-path

#10
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013
Cred ca am reusit am gasit cum sa fac clip-path-ul relativ la imaginea sursa
clipPathUnits="objectBoundingBox"


dar apoi unitatile de masura trebuie sa fie 0.4 nu merge cu 40%

Va multumesc frumos

Asta este codul care rezulta:
https://codepen.io/m...dor/pen/xxJBqRO

Acum pasul urmator este sa fac fiecare bucata de puzle sa apara animata. In codul meu php o sa generez prima data prima bucata de puzle, apoi dupa ce studentii mai fac niste exercitii a doua... si as vrea cand le apare urmatoarea bucata din puzle sa fie o mica animatie. Habar nu am cum sa fac acum pentru ca as vrea sa fac animatia doar pe ultimul polygon si cele doua cercuri din svg, care sunt de fapt bucata din puzzle, dar investighez si revin.

Daca cumva puteti sa ma ajutati cu o idee, m-ar ajuta ca punct de plecare sa merg in directia cea buna.

Multumesc frumos

Anunturi

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate