Jak przesunąć zdjęcie na spód?

pytanie zadane 10 kwietnia 2016 w HTML i CSS przez niezalogowany

Witajcie!

Pisząc stronę natrafiłem na pewien problem: otóż chciałem zrobić by tło strony było "prześwitujące", to znaczy by było widać, co się pod nim znajduje, w tym przypadku kolor.

Tak więc jako kolor w body ustawiam ciemnoszary, a potem na niego nakładam obrazek. I problem jest taki, że nie widać containera. Da się jakoś przesunąć go na wierzch albo obrazek na spód? A jeśli nie, to czy istnieje inny sposób na to?

To mój kod:

body{
	background-color: #1D2126;
	margin: 0px;
}
#background{
	opacity: .25;
	width: 100%;
	height: 100%;
	line-height: 2em;
}
#container{
	width: 700px;
	height: 400px;
	background-color: black;
	z-index: 2;
}

<!DOCTYPE html>
<head>
	<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="background">
		<img src="bg.png" style="width:100%;height:100%;">
		<div id="container">Welcum</div>
	</div>
</body>

Pozdrawiam.

2 odpowiedzi

odpowiedź 10 kwietnia 2016 przez Barus Stary wyjadacz (14,120 p.)

Mógłbyś opisać trochę jaśniej o co Ci chodzi, bo nie rozumiem do końca ? :) Ale już teraz dam Ci kilka rad.

1. Zmień kolor czcionki na biały, bo inaczej napisu "Welcum" w ogóle nie zobaczysz.
2. Dodaj atrybut "alt" w znaczniku <img>, a jego wysokość i szerokość wystylizuj w CSS
3. Jeśli dajesz do jakiegoś atrybutu w CSS właściwość 0 to nie trzeba pisać px.

To tak na szybko. Sformułuj swoje pytanie dokładniej to może dam rade Ci pomóc.

Pozdrawiam!

odpowiedź 10 kwietnia 2016 przez jaca121212 Nałogowiec (40,760 p.)

Do końca to nie wiem czy cię dobrze zrozumiałem, a więc body to masz obrazek a div o id background masz białe (przezroczyste tak abyś mógł zobaczyć co jest pod nim ) http://codepen.io/jaca121212/pen/KzQVKb

jeśli nie o to ci chodziło to wyjaśnij to jeszcze raz ale w taki sposób żeby to też inni mogli zrozumieć.

komentarz 10 kwietnia 2016 przez niezalogowany

O to chodzi, dzięki!

komentarz 10 kwietnia 2016 przez Ares21 Bywalec (2,260 p.)

Dodam tylko, że opacity odnosi się do przezroczystości nie tylko tła elementu, ale także jego całej zawartości. Bezpieczniej jest zarządzać przezroczystością z perspektywy opcji background. http://codepen.io/anon/pen/KzQVaY gdzie 0.28 to 28% widocznosci.