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

Opacity tylko dla backgroung-image, nie dla tekstu

VPS Starter Arubacloud
0 głosów
356 wizyt
pytanie zadane 23 marca 2020 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)
edycja 23 marca 2020 przez vingilot85
Witam,

mam szereg div'ów dla których tłem są zdjęcia. Mają one właściwość opacity:.6, jednak na tle owych zdjęć jest tekst, który chciałbym, aby właściwości przezroczystości już nie miał.

Czy jest na to jakaś sztuczka?

Dodam, że !important w dziecku w którym jest tekst nie działa

3 odpowiedzi

0 głosów
odpowiedź 24 marca 2020 przez ShiroUmizake Nałogowiec (46,300 p.)
children; absolute;

parent: relative.

btw. Pokaż strukturę.
komentarz 24 marca 2020 przez vingilot85 Obywatel (1,150 p.)

Niestety nie działa. Podaje kod

HTML:

<div class="frame_mini_oferta" style="background-image:url('img/obsltech.jpg');">
        <div class="frame_mini_oferta_text" >
              Obsługa techniczna sceny</br></br>
              Oferujemy bardzo szeroki wachlarz rozwiązań estradowych. </br>
              Obsłużymy kompleksowo imprezę w obrębie sceny i realizacji. </br>
              Oczywiście proponujemy obsługę wraz z pełnym zapleczem sprzętowym.
        </div>
 </div>

CSS:

.frame_mini_oferta
{
	display:inline-block;
	filter: brightness(0.25);
	transition-duration:1s;
	margin-bottom:-9px;
	font-size:10pt;
	line-height:1.3em;
	color:#fff;
	width:25%; 
	height:15%;
	background-repeat: no-repeat;
    background-size: 100%;
}

.frame_mini_oferta_text
{
	color:#fff;
}

 

0 głosów
odpowiedź 24 marca 2020 przez Kolberg Obywatel (1,560 p.)

Może coś takiego, jeżeli dobrze zrozumiałem:

<div style="height:100%;width:100%;background-image:url('obrazek.jpg');position:relative;top:0;left:0;z-index:1;opacity:.6"></div>
<div style="position:relative;left:0;top:0;z-index:9999">
      tekst
</div>

 

0 głosów
odpowiedź 25 marca 2020 przez frostify Mądrala (5,640 p.)

Nie da się ustawić opacity dla diva tak, by nie dotknęło to jego dzieci, czyli elementów wewnątrz.

Nie istnieje taka funkcja jak background-opacity.

Dlatego trzeba stworzyć oddzielne elementy, a przez position: absolute ustawić je tak, by na siebie nachodziły.

Oto przykład:

https://codepen.io/frostify/pen/BaNqqKW 

Ustawiłem kolor na red, żeby wyrażnie widać było, że opacity nie dotyka tekstu.

Podobne pytania

0 głosów
1 odpowiedź 450 wizyt
pytanie zadane 31 marca 2018 w HTML i CSS przez Leho99 Nowicjusz (200 p.)
0 głosów
3 odpowiedzi 284 wizyt
pytanie zadane 2 stycznia 2018 w HTML i CSS przez Mikołaj Użytkownik (780 p.)
0 głosów
2 odpowiedzi 381 wizyt
pytanie zadane 7 grudnia 2017 w JavaScript przez ajzyn Użytkownik (510 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 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!

...