backdrop-filter özelliği
Bir header'ım var. HTML:
<header>
<h1>Başlık</h1>
<ul>
<li><a href="#home"><i class="fas fa-home"></i>Ana Sayfa</a></li>
<li><a href="#services"><i class="fas fa-toolbox"></i>Servislerimiz</a></li>
<li><a href="#about"><i class="far fa-address-card"></i>Hakkımızda</a></li>
<li><a href="#contact"><i class="fas fa-phone-alt"></i>İletişim</a></li>
</ul>
</header>
CSS:
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(2px);
}
header h1 {
border-radius: 15px;
font-size: 30px;
}
header ul {
display: flex;
}
header ul li a {
display: flex;
margin: 0 10px;
color: #3f3f3f;
transition: 500ms;
padding: 11px 10px 10px 10px;
position: relative;
overflow: hidden;
}
Telefondan girildiğinde listeme bu şekilde CSS ekliyorum
ul {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(3px);
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 10;
}
Ancak header'ımda backdrop-filter özelliğini kaldırmadığımda ul'em header'a göre yerleşiyor.
Header'daki backdrop-filter'a none veya blur(0) verdiğimde diğer header gözükmüyor sadece ul gözüküyor
Edit: Şu an baktım header'da ki backdrop-filter'ı en başta da kaldırsam sadece ul gözüküyor header'ın background'u ve başlığımı göremiyorum.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
Hocam daha basitçe anlatabilir misin tam olarak ne yapmak istiyorsun anlamadım.