de-vraag
Więcej
Question

CSS Krycie tła

Używam czegoś podobnego do poniższego kodu:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

Oczekiwałem, że to sprawi, że tło będzie miało nieprzezroczystość 0,4, a tekst będzie miał 100% nieprzezroczystości. Zamiast tego oba mają nieprzezroczystość 0,4.

Peter Mortensen
Peter Mortensen
Edytowane pytanie 23. marca 2019 в 12:24
Programowanie
html
css
opacity
Popular videos
« Poprzedni
Następny »
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.
Solution / Answer

Dzieci dziedziczą nieprzezroczystość. Byłoby to dziwne i niewygodne, gdyby tak nie było.

Możesz użyć półprzezroczystego pliku PNG jako obrazu tła lub użyć koloru RGBa (a jak alfa) jako koloru tła.

Przykład, 50% wyblakłe czarne tło:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
Peter Mortensen
Peter Mortensen
Edytowana odpowiedź 23. marca 2019 в 12:25
1095

Zrobiłbym coś takiego

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

To powinno zadziałać. To jest zakładając, że jesteś zobowiązany do posiadania półprzezroczystego obrazu BTW, a nie koloru (dla którego powinieneś po prostu użyć rgba). Zakłada się również, że nie możesz'po prostu zmienić nieprzezroczystości obrazu wcześniej w Photoshopie.

Peter Mortensen
Peter Mortensen
Edytowana odpowiedź 23. marca 2019 в 12:41
29

Dzieje się tak, ponieważ wewnętrzny div ma 100% nieprzezroczystości div, w którym jest zagnieżdżony (który ma 40% nieprzezroczystości).

Aby to obejść, jest kilka rzeczy, które możesz zrobić.

Możesz utworzyć dwa oddzielne divy w ten sposób:

<div id="background"></div>
<div id="bContent"></div>

Ustaw żądane krycie CSS i inne właściwości dla tła i użyj właściwości z-index (z-index), aby stylizować i pozycjonować div bContent. W ten sposób można umieścić div nad tłem div bez konieczności zmieniania jego nieprzezroczystości.

Inną opcją jest RGBa. Pozwoli to na zagnieżdżenie divów i nadal będzie można uzyskać nieprzezroczystość specyficzną dla danego diva.

Ostatnią opcją jest po prostu zrobienie półprzezroczystego obrazu .png w wybranym kolorze w edytorze obrazów, ustawienie właściwości background-image na adres URL obrazu i wtedy nie będziesz musiał się martwić o mieszanie z CSS i utratę możliwości i organizacji zagnieżdżonej struktury div.

Peter Mortensen
Peter Mortensen
Edytowana odpowiedź 23. marca 2019 в 12:30
3