I am trying to blur the image without blurring my name heading and upper navigation bar text. On using filter: blur(), the text is also getting blurred. I have tried using the filter in main header where I have defined my background image as well. Also I have tried using backdrop but that does not do anything also. Kindly help me with this.
.NavBar span {
display: inline-block;
/*width: 100px;*/
/*height: 30px;*/
width: auto;
height: auto;
font-size: 1.3rem;
text-align: center;
padding: 3px;
margin: 3px 20px 3px;
color: #ffffff;
/*change the cursor on hover*/
cursor: pointer;
transition: transform 0.2s;
}
/*Animation on hover on the link name*/
.NavBar span:hover {
transform: scale(1.1);
color: #999797;
}
.NavBar {
padding-left: 25vw;
}
header {
height: 65vh;
background-image: url("https://images.unsplash.com/photo-1542074494-62e9e51a61b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
background-attachment: fixed;
/*first value gives width and second height*/
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
filter: blur();
}
#NameHeading {
color: #ffffff;
font-size: 5rem;
text-align: center;
margin: 15vh;
transition: transform 0.2s;
}
#NameHeading:hover{
transform: scale(1.1);
color: #939191;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vibhor's Resume</title>
<link href="style.css"
rel="stylesheet">
<link href="static/profile.png"
rel="shortcut icon"
type="image/x-icon">
</head>
<body style="font-family: Arial,sans-serif">
<header id="body-header">
<div class="NavBar">
<span id="HomeLink">Home</span>
<span id="AboutLink">About</span>
<span id="SkillLink">Skills</span>
<span id="EduLink">Education</span>
<span id="ProjectLink">Projects</span>
<span id="ContactLInk">Contact</span>
</div>
<div id="NameHeading">
Vibhor Agarwal
</div>
</header>
<main>
<section id="about"></section>
<section id="skills"></section>
<section id="education"></section>
<section id="projects"></section>
<section id="contact"></section>
</main>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire