Przyciemnione tło LightBox

Question

Witam! Piszę dla siebie stronę i mam pytanie jak w CSS przyciemnić tło po otwarciu LightBox (na zdjęciu nie jest przyciemnione tło)

CSS:

.images
{
	text-align: center;
	margin-left: 95px;
}

.image
{
		padding: 30px;
		float: left;
		
}

.box
{
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	
	
}

.box a
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	
}

.box  img
{
	background-color: #ffffff;
	padding: 15px;
	
}

.box:target{
 display: table;
 position: fixed;
}

HTML:
div class="images">

	<a href="#obrazek" class="oblink"><img class="image" width="450px" height="255px"  src="portfolio/1.jpg"  /></a>
	<div class="box" id="obrazek"> 
	<a href="#"><img src="portfolio/1.jpg"/></a>

	</div>

 

Answer 1

background-color: rgba(0,0,0,.5);

Comments

dzięki :D

Answer 2

Jeśli dobrze rozumiem ,to tło zakrywające resztę strony (półprzezroczyste)? Możesz dać na .box position: relative; np na ::before dać absolute; top: -300%; bottom: 300%; left: -300%; right: -300%; width i heigh  po 700% ;) background jakiś ciemny z opacity. i nie zapomnij content: ' ';

Comments

A czemu aż takie duże wartości? o.o

---

bo 100% to jest liczone od .box ;) a jeśli on zajmuje np połowę ekranu, to lepiej żeby zasłoniło cały ;)

 

btw overflow-x:hidden na body ;)

---

a dlaczego jak dodałem 2 zdjęcie i na nie klikę to wyświetla się to 1?