transparent img but normal text

pytanie zadane 11 czerwca 2018 w HTML i CSS przez SoDoIt Obywatel (1,190 p.)
zamknięte 11 czerwca 2018 przez SoDoIt

Witam, czy jest jakiś sposób na to aby zdjęcie (background w css) było przezroczyste(transparentne np. 0.6 opacity) natomiast tekst który znajduję się w tym samym kontenerze(dla którego ustaliliśmy przezroczysty background) miał tekst normalny tzn. opacity 1(nie był przezroczysty); Czy da się coś takiego zrobić w html/css czy trzeba się nauczyć js ? :D

komentarz zamknięcia: rozwiązany problem

1 odpowiedź

odpowiedź 11 czerwca 2018 przez imklau Nałogowiec (42,090 p.)
wybrane 11 czerwca 2018 przez Arkadiusz Waluk

Najlepsza

Da sie.

Możesz np zrobić zdjęcie na pseudoelemencie :before lub :after i tam ustawiać opacity. Wtedy to co jest w środku kontenera nadal będzie miało swoje opacity: 1

komentarz 11 czerwca 2018 przez SoDoIt Obywatel (1,190 p.)

genialne.
Podziękować

komentarz 11 czerwca 2018 przez Chess Szeryf (76,710 p.)

Możesz jeszcze spróbować wykonać to trick'iem. Wezmę może przykład z CSS-TRICKS:

https://css-tricks.com/examples/NonTransparentOverTransparent/

Zajrzałem do kodu źródłowego i oto rezultat:

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Helvetica, sans-serif;
	background: url(images/bg.jpg) repeat;
	color: white;
	text-align: center;
}

h2 {
	font-size: 2.0em;
	font-family: Garamond, "Times New Roman", Serif;
}

h2.ontop {
	position: relative;
	top: 4.7em;
	z-index: 2; 
}

.bar {
	height: 4em;
	padding-top: 2em;
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	filter:alpha(opacity=50);
	background: black;
	border-top: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin-top: 5.0em;
}

<body style="background:grey">

<div class="bar">
   <h2>Text in this bar inherits the transparency.</h2>
</div>
<h2 class="ontop">Text in this bar stays opaque.</h2>
<div class="bar"></div>

</body>

komentarz 11 czerwca 2018 przez SoDoIt Obywatel (1,190 p.)

jeśli dobrze rozumiem to za ten efekt (pomijając słabą jakoś kodu oczywiście xd) odpowiada z-index i position relative ? jeśli dobrze rozumiem. Nic nie widze chyba że coś mi umknęło, ale w moim projekcie chyba nie przejdzie bo mam parallaxe.
No jeszcze może chodzić o to że jest po za divem ale to tak średnio semantycznie wygląda.

komentarz 11 czerwca 2018 przez SoDoIt Obywatel (1,190 p.)

zrobiłem sposobem noemi(wydawał się dobry), ale zdjęcie się nie wyświetla.

.about{
  align-items: center;
  /* background-color: rgb(244, 244, 244); */
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  margin-bottom: 2em;
  padding: 5em;
  /* background-image: url('../img/tlo_2.jpeg'); */
  /* opacity: 0.6; */
  /* position: relative; */
  /* width: 100%;
  height: 75vh; */
  /* background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat; */
}
.about:before{
  background-image: url('../img/tlo_2.jpeg');
  width: 100%;
  height: 75vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0.6;
  position: absolute;
}

komentarz 11 czerwca 2018 przez imklau Nałogowiec (42,090 p.)

jeśli tworzysz jakiś pseudoelement to pamiętaj, żeby na tym normalnym elemencie (tutaj .about) ustawić position: relative albo jakieś inne pozycjonowanie (nie może być domyślne statyczne).

Tutaj wstawiłeś kod, gdzie po części jest zakomentowany (to pozycjonowanie też).

A poza tym zapomniałeś o obowiązkowej właściwości dla :before lub :after czyli content