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:
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 :)
