Добавьте фильтр css на фон липкой панели навигации. - PullRequest
Новая
       0

Добавьте фильтр css на фон липкой панели навигации.

0 голосов
/ 15 марта 2020

Я пытаюсь создать прозрачную или непрозрачную липкую панель навигации и добавить к своему фону какой-нибудь фильтр css, например размытие. Я закончил тем, что сделал две перекрывающиеся навигационные панели с одинаковым размером. Один с текстом, а другой с фильтром (они оба прозрачные или непрозрачные), поэтому фильтр не будет применен к тексту, а только к фону, но кажется, что фильтр не работает. Вот код: 

body {
    margin: 0px;
}

nav {
    height: 56px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: rgba(255, 255, 255, 0.5);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

.menu {
    flex: 1;
    width: 40%;
    display: flex;
    justify-content: center;
}

.menu>p {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}

nav p:hover {
    cursor: pointer;
}

.background {
    height: 63px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    filter: blur(8px);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <nav>
        <div class="menu">
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
        </div>
    </nav>
    <div class="background">
    </div>
    <main>
        <img src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg">
    </main>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 15 марта 2020

Просто установите этот фильтр размытия для кода элемента :: nav * before CSS следующим образом: 

body {
	margin: 0px;
}

nav {
	height: 56px;
	padding: 5px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
    position: -webkit-sticky;
  	position: sticky;
  	top: 0;
  	z-index: 2;
    
}

nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
  z-index: 3;
  background: rgba(255, 255, 255, 0.38);
}

.menu {
	flex: 1;
	width: 40%;
	display: flex;
	justify-content: center;
  position: relative;
  z-index: 3;
}

.menu > p {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}

nav p:hover {
	cursor: pointer;	
}

.background {
	height: 63px;
	width: 100%;
  	position: fixed;
  	top: 0;
  	z-index: 1;
  	filter: blur(8px);
}
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	</head>
	<body>
		<nav>
			<div class="menu">
				<p>Example</p>
				<p>Example</p>
				<p>Example</p>
			</div>
		</nav>
		<div class="background">
		</div>
		<main>
			<img src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg">
		</main>
	</body>
</html>
0 голосов
/ 15 марта 2020

Вы можете попробовать фоновый фильтр для достижения этого эффекта. 

body {
  margin: 0px;
  height: 1200px;
}

nav {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.5);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.menu {
  flex: 1;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.menu > p {
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}

nav p:hover {
  cursor: pointer;
}
main {
  margin-top: -66px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="menu">
        <p>Example</p>
        <p>Example</p>
        <p>Example</p>
      </div>
    </nav>
    <main>
      <img
        src="https://3.bp.blogspot.com/-yvHXo7HtHDE/UATxfDGF1BI/AAAAAAAAFFM/hFE4J9QtiYQ/s1600/Landscape.jpg"
      />
    </main>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...