Как сделать так, чтобы градиент фона заполнял всю страницу? - PullRequest
Новая
       24

Как сделать так, чтобы градиент фона заполнял всю страницу?

0 голосов
/ 30 сентября 2018

Я только недавно начал изучать HTML / CSS, и меня немного смущает вопрос о том, как сделать этот линейный градиент для фона вмещающим всю страницу.Я ковырялся, и я не могу найти нить, которая соответствует моей конкретной ситуации.

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

Итак, если бы вы, например, прокрутили вправо, вы бы увидели, какой будет «самая правая» область градиента, а не просто весь градиент, который яустановить (ни повторяющийся градиент).Извините, если мне неясно.Спасибо за ваше время.

<head>
    <style>
        html {
            height: auto;
        }

        body {
            background-image: linear-gradient(to bottom right, pink, white);
            height: auto;
            background-attachment: fixed;
            background-size: cover;
        }

        div {
            display: inline-block;
            height: 100px;
            width: 100px;
        }

        .blue {
            background-color: blue;
        }

        .yellow {
            background-color: yellow;
        }

        .red {
            background-color: red;
        }

        .magenta {
            background-color: magenta;
        }

        .sand-brown {
            background-color: rgb(214, 176, 93);
            /*height: 5000px;*/
            width: 5000px;
        }

        .sand-brown2 {
            background-color: rgb(214, 176, 93);
            height: 5000px;
            /*width: 5000px;*/
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="yellow"></div>
    <br>
    <div class="red"></div>
    <div class="magenta"></div>
    <br>
    <div class="sand-brown"></div>
    <div class="sand-brown2"></div>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 30 сентября 2018

Вы можете использовать параметр background-size, который достаточно велик, чтобы охватить весь ваш контент, например background-size: 5100px 5500px; в вашем случае: 

body {
  background-image: linear-gradient(to bottom right, pink, white);
  background-size: 5100px 5500px;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}
<div class="blue"></div>
<div class="yellow"></div>
<br>
<div class="red"></div>
<div class="magenta"></div>
<br>
<div class="sand-brown"></div>
<div class="sand-brown2"></div>
0 голосов
/ 01 октября 2018

Проблема, с которой вы здесь сталкиваетесь - это переполнение.Ваш элемент переполняет тело, а размер градиента соответствует размеру body, затем он распространяется на корневой элемент и повторяется.Чтобы избежать этого, вам может понадобиться добавить еще один контейнер, который вы делаете inline-block. 

.container {
  background-image: linear-gradient(to bottom right, pink, white);
  display: inline-block;
}

.container > div {
  display: inline-block;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.magenta {
  background-color: magenta;
}

div.sand-brown {
  background-color: rgb(214, 176, 93);
  /*height: 5000px;*/
  width: 5000px;
}

div.sand-brown2 {
  background-color: rgb(214, 176, 93);
  height: 5000px;
  /*width: 5000px;*/
}
<div class="container">
  <div class="blue"></div>
  <div class="yellow"></div>
  <br>
  <div class="red"></div>
  <div class="magenta"></div>
  <br>
  <div class="sand-brown"></div>
  <div class="sand-brown2"></div>
</div>
0 голосов
/ 30 сентября 2018

Вам необходимо присвоить атрибут градиента элементу html вместо элемента body .

Итак, вместо этого: 

<head>
<style>
    html {
        height: auto;
    }

    body {
        background-image: linear-gradient(to bottom right, pink, white);
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

Вы должны иметь это: 

<head>
<style>
    html {
        height: auto;
        background-image: linear-gradient(to bottom right, pink, white);
    }

    body {
        height: auto;
        background-attachment: fixed;
        background-size: cover;
    }

Это то, что вы искали?

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

Похожие темы

...