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

Przezroczystość zdjęcia - HTML

Aruba Cloud - Virtual Private Server VPS
0 głosów
674 wizyt
pytanie zadane 16 maja 2021 w HTML i CSS przez Hubert731 Obywatel (1,650 p.)
Witam, jak ustawić przezroczystość zdjęcia, które pełni funkcję tła, ale przy tym nie tracąc przezroczystość tekstu, który jest na tym zdjęciu?

3 odpowiedzi

0 głosów
odpowiedź 16 maja 2021 przez SzkolnyAdmin Szeryf (89,570 p.)
Sprecyzuj: masz zdjęcie z przezroczystym tłem jako background i na tym masz tekst?
komentarz 16 maja 2021 przez Hubert731 Obywatel (1,650 p.)
Na tle mam noramlnie zdjęcie, ale chce, zeby to zdjecię bylo troche bardziej przezroczyste, czy musze robic to w osobnym programie, czy jedna dam rade w html.

http://prntscr.com/1306sv1
0 głosów
odpowiedź 16 maja 2021 przez Ludek Obywatel (1,560 p.)
img{
    opacity: 0.4;
}

0.4 to jest przykładowa wartość możesz wpisać inną.

komentarz 16 maja 2021 przez Hubert731 Obywatel (1,650 p.)
niestety to nie działa :/
komentarz 16 maja 2021 przez Ludek Obywatel (1,560 p.)
<html>
<head>
<style>
div.background {
    background: url(/css/image.jpg) repeat;
}

div.transbox {
    margin: 1px;
    background-color: #ffffff;
    opacity: 0.4;
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <!-- tutaj zawartość strony--> 
  </div>
</div>

</body>
</html>

 

 
0 głosów
odpowiedź 16 maja 2021 przez Tnifey Pasjonat (24,190 p.)

najprostszym sposobem będzie umieszczenie wszystkiego we wrapperze i zmienianie opacity obrazka jeśli wrapper jest :hover :P

przykładowo: https://codepen.io/Tnifey/pen/JjWKBab

@edit: nie sprecyzowałeś w sumie czy ma być hover, ale zrobienie tego bez niego jest tym samym tylko bez hover :P w przykładzie to:

.wrapper > .image {
  opacity: 0.5;
}

 

komentarz 16 maja 2021 przez Hubert731 Obywatel (1,650 p.)
Ok faktycznie działa, tylko nie do końca rozumiem większość linijek w classie image i tego "  transform: translate(-50%, -50%);"
komentarz 16 maja 2021 przez Tnifey Pasjonat (24,190 p.)

transform: translate(-50%, -50%) to centrowanie tekstu względem rodzica :P 

dodałem parę komentarzy do tego przykładu, także możesz zobaczyć, czy rozumiesz :P

https://codepen.io/Tnifey/pen/JjWKBab

komentarz 16 maja 2021 przez Hubert731 Obywatel (1,650 p.)
Dlaczego w jednym jest obraz po najechaniu jaśniejszy http://prntscr.com/130912u

a w drugim robi się po najechaniu ciemniejszy? http://prntscr.com/13090lo
komentarz 16 maja 2021 przez Tnifey Pasjonat (24,190 p.)
Czy mógłbyś dodać kod, którego używasz? Możliwe, że tło wrappera w jednym wypadku jest ciemne, a w drugim jasne. obrazek staje się po prostu przezroczysty więc tło, na którym się znajduje ma znaczenie :P
komentarz 16 maja 2021 przez Hubert731 Obywatel (1,650 p.)
		<div class="content">
			<div class="window" ><img src="img/grafiika.jpg" class="image"><div class="text"><a href="#">Grafika<i class="icon-brush"></i></a></div></div>
			<div class="window" ><img src="img/animacja.jpg" class="image"><div class="text"><a href="#">Animacja <i class="icon-video"></i></a></div></div>
			<div class="window" ><img src="img/audiobook.jpg" class="image"><div class="text"><a href="#"> Audiobook<i class="icon-book"></i></a></div></div>
			<div class="window2" ><img src="img/fotografia.jpg" class="image"><div class="text"><a href="#">Fotografia<i class="icon-camera-alt"></i></a></div></div>
			<div class="window2" ><img src="img/film.jpg" class="image"><div class="text"><a href="#">Film<i class="icon-videocam"></i></a></div></div>
			<div style="clear:both"> </div>
		</div>

 

.content{
	background-color:#A8A8A8;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	padding:40px;
	height:670px;
}

.window{
	float:left;
	width:300px;
	height:187px;
	margin:10px;
	text-align:center;
	line-height:650%;
	font-size:30px;
	font-weight:700;
	letter-spacing:2px;
	text-shadow: 2px 2px 0 black, -2px 2px 0 black, -2px -2px 0 black, 2px -2px 0 black;
	border-radius:12px;
	position: relative;
}
.window2{
	text-shadow: 2px 2px 0 black, -2px 2px 0 black, -2px -2px 0 black, 2px -2px 0 black;
	font-weight:700;
	float:left;
	background-color:black;
	width:460px;
	height:270px;
	margin:10px;
	text-align:center;
	line-height:900%;
	font-size:30px;
	letter-spacing:2px;
	border-radius:12px;
	position:relative;
}
a{
	color:white;
	text-decoration:none;
	display:block;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.5s;
  opacity:0.85;
  border-radius:12px;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.window:hover > .image {
  opacity: 0.4;
}
.window2:hover > .image {
  opacity: 0.4;
}

 

komentarz 21 maja 2021 przez Hubert731 Obywatel (1,650 p.)

@Tnifey,

.window{
	float:left;
	width:300px;
	height:187px;
	margin:10px;
	text-align:center;
	line-height:650%;
	font-size:30px;
	font-weight:700;
	letter-spacing:2px;
	text-shadow: 2px 2px 0 black, -2px 2px 0 black, -2px -2px 0 black, 2px -2px 0 black;
	border-radius:12px;
	position: relative;
}
.window2{
	text-shadow: 2px 2px 0 black, -2px 2px 0 black, -2px -2px 0 black, 2px -2px 0 black;
	font-weight:700;
	float:left;
	background-color:black;
	width:460px;
	height:270px;
	margin:10px;
	text-align:center;
	line-height:900%;
	font-size:30px;
	letter-spacing:2px;
	border-radius:12px;
	position:relative;
}
a{
	color:white;
	text-decoration:none;
	display:block;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.5s;
  opacity:0.85;
  border-radius:12px;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.window:hover > .image {
  opacity: 0.4;
}
.window2:hover > .image {
  opacity: 0.4;
}

 

komentarz 21 maja 2021 przez Hubert731 Obywatel (1,650 p.)
ooo faktycznie, nie zauważyłem tego, jest tło czarne, dziękuje :D
komentarz 22 maja 2021 przez Hubert731 Obywatel (1,650 p.)
Mógłby mi ktoś wytłumaczyć, na czym polega position: relative oraz czym sie różni od absolute?

 

I jeszcze po co jest  transform: translate(-50%, -50%);, w sensie, dlaczego ten tekst domyslnie ustawia sie w jakims dziwnym miejscu?

Podobne pytania

+1 głos
1 odpowiedź 528 wizyt
pytanie zadane 28 maja 2021 w HTML i CSS przez Piotrek G Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 512 wizyt
pytanie zadane 17 września 2022 w HTML i CSS przez Vitaminka Nowicjusz (120 p.)
0 głosów
1 odpowiedź 297 wizyt

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...