• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Odpowiedni styl dla tekstu

VPS Starter Arubacloud
+1 głos
109 wizyt
pytanie zadane 19 października 2021 w HTML i CSS przez Bakkit Dyskutant (7,600 p.)
Cześć.

Moja strona składa się z trzech elementów, są to tło czerwone (pokrywa całą stronę), tło żółtę (pokrywa całą stronę oraz tło czerwone tak, że nie widać czerwonego tła), na środku znajduje się tekst.

Chciałbym aby kolor tekstu był w kolorze tła pierwszego, którego nie widać (w tym przypadku czerwonego), ale nie chcę tego robić poprzez nadanie mu styli, chcę aby przenikał przez tło żółte i przez ten tekst było widać tło czerwone. Wydaje mi się, że wystarczy jakiś filter, lub mix-blend-mode, ale bawię się już chwilę i nie mogę nic takiego stworzyć.

Proszę o pomoc.

2 odpowiedzi

0 głosów
odpowiedź 20 października 2021 przez pablop76 VIP (123,060 p.)

Jest taka właściwość css background-clip , ale tło musi być ustawione dla elementu zawierającego tekst.

 

0 głosów
odpowiedź 20 października 2021 przez VBService Ekspert (251,250 p.)
edycja 20 października 2021 przez VBService

Pewnie nie o to tobie dokładnie chodzi, ale

efekt można uzyskać też przez

color: inherit;

z elementu "rodzica", gdy tekst jest elementem "dzieckiem"

 

<div class="parent">
  <div class="child">
    kolor tekstu<br>pobrany z parent
  </div>    
</div>
html, body {
  margin: 0;
}
.parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
  color: red;
}
.child {
  display: grid;
  place-items: center;
  font: 900 2em/2 arial;
  width: 100%;
  height: 100%;
  background-color: yellow;
  color: inherit;
}

 

przez użycie zmiennej w css

:root {
  --parent-bg-color: red;
}
html, body {
  margin: 0;
}
.parent {
  width: 100vw;
  height: 100vh;
  background-color: var(--parent-bg-color, red);
}
.child {
  display: grid;
  place-items: center;
  font: 900 2em/2 arial;
  width: 100%;
  height: 100%;
  background-color: yellow;
  color: var(--parent-bg-color, red);
}

 

Using CSS custom properties (variables) ]

Podobne pytania

+1 głos
3 odpowiedzi 341 wizyt
pytanie zadane 22 marca 2021 w HTML i CSS przez Fishu Nowicjusz (150 p.)
0 głosów
1 odpowiedź 376 wizyt
pytanie zadane 3 września 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)
0 głosów
1 odpowiedź 450 wizyt
pytanie zadane 31 marca 2018 w HTML i CSS przez Leho99 Nowicjusz (200 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...