У меня есть панель навигации, которая прозрачна, и поэтому сначала показывает мой градиентный фон. Однако, когда я прокручиваю, он показывает текст и / или рисунки внизу, но я хотел бы, чтобы он показывал фон и покрывал текст. Главная страница: https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78, прокручиваемый сайт: https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1; прокрутил еще: https://gyazo.com/4849fb7f11689a5360e2e8686713d01d. Как вы можете видеть, навигационная панель выше всего - но я бы хотел, чтобы вокруг навигационной панели было поле, которое показывает фон только при прокрутке - если это имеет смысл - как бы вы это сделали? GIF показывает проблему с прокруткой: https://gyazo.com/6626f65e632e61127413c673d92a2cba
Соответствующий HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="smoothscroll.js"> </script>
<body>
<div class="main">
<nav class="fixed-nav-bar">
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li><a href="#body1">General</a><li>
<li><a href="#body2">Computers in <br>the Workforce</a></li>
<li><a href="#body3">Automated <br>Decision Making</a></li>
<li><a href="#body4">Artificial <br>Intelligence</a></li>
<li><a href="#body5">Environmental <br>Effects</a></li>
<li><a href="#body6">Censorship &<br> The Internet</a></li>
<li><a href="#body7">Monitoring<br> Behaviour</a></li>
<li><a href="#body8">Analysis of<br> Personal<br> Information</a></li>
<li><a href="#body9">Piracy &<br> Offensive<br> Communications</a></li>
<li><a href="#body10">User Interface<br> Design<br> Considerations</a><li>
<li><a href="#body11">Contact</a></li>
</ul>
</div>
<div class="gift">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png"></a>
</div>
</nav>
Соответствующий CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
font-size-adjust: auto;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px 35px;
width: 15%;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{
transform: scale(1.35)
}
.fixed-nav-bar{
position:fixed;
z-index: 9999;
height: 200px;
width: 100%;
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -230px;
margin-right: 106px;
padding-right: 15px;
/* note position zzzz*/
}
.navigation-links ul {
display: inline-flex;
}
.navigation-links ul li {
margin: 10px 9px;;
margin-top: 14px;
padding: 6px 5px;
font: Montserrat;
font-weight: normal;
position: relative;
list-style: none;
font-size: 85%;
word-spacing: 0px;
overflow: hidden;
z-index: 3;
}
@media screen and (max-width: 1580px) {
.navigation-links ul li {
font-size: 0.75rem;
margin: 10px 6px;
word-spacing: 0px;
padding: 6px 3px;
}
.navigation-links{
margin-right: 74px;
margin-top: -180px;
}
.logo img{
width: 230px;
height: 230px;
}
}
@media screen and (max-width: 1220px) {
.navigation-links ul li {
font-size: 0.65rem;
margin: 10px 5px;
word-spacing: 0px;
padding: 6px 2px;
}
.navigation-links{
margin-right: 74px;
margin-top: -163px;
}
.logo img{
width: 205px;
height: 205px;
}
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.navigation-links ul li a:hover{
font-weight: bold;
}
.gift img{
width: 5.5%;
float: right;
margin-top: -76px;
margin-left: 10px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;
}
Я делаю Не знаю, если мне нужно добавить блок, который прозрачен для фона, но не для текста / изображений в файле html? Надеюсь, это соответствующий код, чтобы вы понимали мою проблему и знали, как мне помочь? Спасибо