Jak zblurować kolor tła bez blurowania tekstu?

pytanie zadane 26 stycznia 2017 w HTML i CSS przez Meggie Nowicjusz (120 p.)

Witam was serdecznie :)

Od kilku dni wsiąkam w tematy web deweloperki i próbuję stworzyć swoją pierwszą stronę-wizytówkę (na razie wygląd).

Moim problemem jest to, że chcę zblurować tło div, bez blurowania tekstu. Szukałam odpowiedzi w W3Schools czy StackOverflow, jednak tam pojawiały się pytania i odpowiedzi na temat zblurowania obrazka w tle, a nie samego koloru tła.

Na chwilę obecną wygląda to niestety tak:
zblurowane tło i zblurowany tekst

Kod html i css jaki mam do tej pory wygląda tak:

HTML:

<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
<meta http-equiv="X-Ua-Compatible content="IE=edge, chrome=1">

<link rel="stylesheet" href="css/main.css"/>
	<script src="code.js"></script>

</head>
<body>

	<div class="container"> 
	<div class="logo"><h1> Coffee </h></div>
	<div class="menu"> Coffee</div>
	<div class="content"> Coffee</div>
	<div class="sidebar"> Coffee</div>
	<div class="footer">Site Author: ; 
		<br> Web Designer:  
		<br> Special thanks for:   </div>

</div>

</body>
</html>

CSS:

body
{	background-image: url(../img/coffee.jpg);
	/* Background pattern from photoshopcs6download.com */
	margin: 0;
}

.container
{	background-color: rgba(139,69,19,0.6);
	filter: blur(5px) brightness(0.5);
	width: 900px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid;
    border-radius: 2em;
	
}

.logo
{	
	width: 900px;
	height: 60px;
	border: 2px solid;
    border-radius: 2em;
	font-family: Arial-Black;
	color: black;
}


.menu
{	
	filter: blur(5px) brightness(0.5);
	width: 900px;
	height: 50px;
	border: 2px solid;
    border-radius: 2em;
	font-family: Arial-Black;
	color: black;
	
}

Będę bardzo wdzięczna za podpowiedzi i poprawki :)