Jak udělat průhledné text ignorovat jeho rodiče div, background-color?

Question 1

Mám kontejner div s barevným pozadím, "tlačítko" div uvnitř nádoby -pomocí různých barev pozadí a textu uvnitř "tlačítko" div.

Moje otázka je: je možné, aby se text "dědit" kontejner barva, i když text není kontejner je dítě?

Jediné možné řešení, aniž by se museli uchýlit k JS prosím.

CSS:

.container{
  background-color: red;
}

.button{
background-color: white;
}

HTML:

<div class="container">
  <div class="button">
   <a href="#">THE TEXT</a>
  </div>
</div>

Dané CSS a HTML jsou jen příklad můj skutečný problém, který obsahuje hodně "tlačítka" a "nádoby".

Question 2

Jeden způsob, jak by se definovat CSS proměnné v nádobě a používat to, aby nastavit obě nádoby barvu pozadí a kotevní prvek má barvu textu.

To funguje, protože v jistém smyslu dítě bude "dědění" nastavení CSS proměnnou (property).

.container {
  --color: red;
  background-color: var(--color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

.button {
  background-color: white;
}

.button a {
  color: var(--color);
}

<div class="container">
  <div class="button">
    <a href="#">THE TEXT</a>
  </div>
</div>

Všimněte si, že v tomto úryvku kontejner byl dán nějaký styling, takže se můžeme vidět.

A Haworth · Answer 1 · 2021-11-19T19:52:05

Jeden způsob, jak by se definovat CSS proměnné v nádobě a používat to, aby nastavit obě nádoby barvu pozadí a kotevní prvek má barvu textu.

To funguje, protože v jistém smyslu dítě bude "dědění" nastavení CSS proměnnou (property).

.container {
  --color: red;
  background-color: var(--color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

.button {
  background-color: white;
}

.button a {
  color: var(--color);
}

<div class="container">
  <div class="button">
    <a href="#">THE TEXT</a>
  </div>
</div>

Všimněte si, že v tomto úryvku kontejner byl dán nějaký styling, takže se můžeme vidět.

Jak udělat průhledné text ignorovat jeho rodiče div, background-color?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii