CSS tekst na przeźroczystym zdjęciu

pytanie zadane 31 października 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)

Witam,

Mam problem z umieszczeniem białego napisu na delikatnie przezroczystym zdjęciu (tło). Utworzyłem div class="content" a w nim kolejny div class="image". Kiedy wstawiam zdjęcie i używam parametru opacity:0.6 wszystko jest ok i zdjęcie robi się przezroczyste jednakże kiedy dodaję tekst na to zdjęcie tekst także przyjmuje opacity 0.6. Jak to rozdzielić żeby napis nie był przezroczysty ?

Dzięki za odpowiedzi

Dawid

4 odpowiedzi

odpowiedź 31 października 2018 przez thryndl Nałogowiec (30,470 p.)
wybrane 31 października 2018 przez Strugaczka

Najlepsza

Ustaw na samo zdjęcie filter: opacity()

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

a w jaki sposób się odwołać w css do samego zdjęcia skoro w html jest:

<div class="content">
    <div class="image">
         tutaj zdjęcie podpięte przez css oraz tekst
    </div>
</div>

komentarz 31 października 2018 przez thryndl Nałogowiec (30,470 p.)

Wstaw zdjęcie jako tag img i odwołaj się po tagu, albo nadaj mu klasę.

Ewentualnie drugie obejście jakie mi przyszło do głowy, to ustaw kolor tekstu za pomocą rgba i tam daj alphe na 1. Nie wiem czy to zadziała ale spróbować warto.

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

Wydawało mi się że już właśnie nadałem mu klasę :)

komentarz 31 października 2018 przez thryndl Nałogowiec (30,470 p.)

Ja w kodzie który podałeś widzę tylko diva z klasą

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

Bardzo Ci dziękuję za wyjaśnienie. Czy w takim razie mógłbyś mi podpowiedzieć jak nadać klasę dla samego zdjęcia ?

komentarz 31 października 2018 przez thryndl Nałogowiec (30,470 p.)

Normalnie dodajesz zdjęcie za pomocą tagu img i dodajesz klasę czy identyfikator tak jak dla diva

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

Aha czyli dodać zdjęcie przez HTML a nie przez css ?

komentarz 31 października 2018 przez thryndl Nałogowiec (30,470 p.)

Tak, będzie ci prościej ogarnąć ta przezroczystosc

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

Super, przetestuję i dam znać.

Dzięki wielkie za pomoc :)

odpowiedź 1 listopada 2018 przez pablop76 VIP (123,180 p.)

Aby opacity nie wpływała na inne elementy najłatwiej moim zdaniem użyć pseudo elementu dla zdjęcia.

<div class="content">
	CSS is the best
</div>

body{
	background-color: #000;
}
.content{
	position: relative;
	width: 512px;
	height: 512px;
	display: flex;
  align-items: center;
  justify-content: center;
	font-size: 3em;
	font-weight: bold;
	color: #f65314;
}
.content:after{
	top: 0;
	bottom: 0;
	content: url('https://www.shareicon.net/data/512x512/2015/09/24/106575_css_512x512.png');
	position: absolute;
	z-index: -1;
	opacity: .4;
}

komentarz 4 listopada 2018 przez Strugaczka Początkujący (260 p.)

Niestety ale ten sposób nie działa. Utworzyłem nowy index HTML wraz z style.css i wkleiłem tam tylko ten kod żeby sprawdzić działanie i nie ma nic poza napisem - zdjęcie się nawet nie ładuje.

komentarz 4 listopada 2018 przez pablop76 VIP (123,180 p.)

Pokaż kod

odpowiedź 31 października 2018 przez niezalogowany

Musisz właściwość opacity dać na img. Gdy opacity dajesz na div a w tym divie są IMG i napis to oba dziedziczą opacity

komentarz 31 października 2018 przez Strugaczka Początkujący (260 p.)

No ale tak zrobiłem - div o klasie image jest w divie o klasie content więc image powinien dziedziczyć po content w którym nie ma żadnego opacity. Opacity jest tylko w klasie image. Muszę to rozbijać na dwa divy niezagnieżdżone ?

odpowiedź 31 października 2018 przez Adusiek Użytkownik (660 p.)

<div class="content">
    <div class="image">
         <img class="zdjecie" href="link do zdjecia" alt="tekst ktory ma sie pokazac jak nie zaladuje sie zdjecie">
    </div>
</div>

Powyżej masz html jak powinien wyglądać.

i teraz w css robisz

.zdjecie {
     opacity: 0.6;
}

komentarz 1 listopada 2018 przez Strugaczka Początkujący (260 p.)

Niestety ale nie działa :( Teraz zdjęcie jest osobno a tekst osobno poniżej zdjęcia. Myślę, że to przez to że sam content jest już wystylizowany.

<div class="content">
	<img class="zdjecie" src="2017-11-13-18-10-45-1200x800.jpg" alt="niepoprawnie załadowane zdjecie">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.zdjecie
{
	opacity: 0.3;
	height: 100%;
	padding-top: 0px;
	margin-top: 0px;
}

.content
{
	width: 1000px;
	margin-left:auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 10px;
}