Фон списка ul белый. Как убрать фон? - PullRequest
Новая
       0

Фон списка ul белый. Как убрать фон?

0 голосов
/ 29 февраля 2020

Я пробовал это, но я все еще вижу белый фон на уль 

*{
  background-color: transparent;
  background-image: none;
}

КОД: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel ="stylesheet" type="text/css" href="style.css"
    <meta charset="utf-8">
    <h1 class="title">PARALLEX</h1>
    <style>.main.img {
  height: 100%;
  width: 100%;
  position:absolute;
  z-index: 1;
}
.title{
  color: white;
  width: 100%;
  font-size: 450%;
  font-family: sans-serif;
  margin-top: 12.5%;
  position: absolute;
  z-index: 2;
  letter-spacing: 1.25em;
  text-align: center;
  text-indent: 1.25em;
}

li, a, button {
  font-family: sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: white;
  text-decoration: none;
}
*{
  background-color: transparent;
  background-image: none;
}
nav {
  order: 1;
}
.nav_links {
  list-style: none;
  margin: 0;
}
.nav_links li {
  display: inline-block;
  padding: 0px 20px;
}
.nav_links li a {
  transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
  color: #0088a9;
}

body {
  margin:0;
}
</style>
  </head>
  <body>
    <nav>
      <ul class="nav_links">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
      </ul>
    </nav>
    <div>
      <img class="main img" src="mountains.jpg">
    </div>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Можете ли вы уточнить вашу проблему? Когда я открываю ваш код, мой фон становится белым, но если я изменяю фон элементов тела на красный, то страница становится красной.

Например, это то, что я вижу, когда тело фиолетового цвета. У меня нет файла изображения, поэтому белая линия там. enter image description here

Кроме того, почему ваш элемент H1 находится в голове? Должно быть в теле 

  <body>
    <h1 class="title">PARALLEX</h1>
    <nav>
      <ul class="nav_links">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
      </ul>
    </nav>
    <div>
      <img class="main img" src="mountains.jpg">
    </div>
  </body>
0 голосов
/ 29 февраля 2020

Ваше изображение не находится за ul, потому что в HTML изображение идет после ul, поэтому без дальнейших инструкций изображение отображается после списка.

Добавьте левое и верхнее значение к поместите изображение в верхний угол: 

.main.img {
  height: 100vh; // "viewport height" seems more appropriate than % in this case
  width:100vw;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1; // negative puts it behind anything with the default value, so you don't need to define the z-index of every single element
}

ul по умолчанию не имеет фона, поэтому вы можете удалить этот блок css: *{ ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...