создание фонового изображения без прокрутки с использованием только html и css - PullRequest
Новая
       6

создание фонового изображения без прокрутки с использованием только html и css

0 голосов
/ 12 января 2020

Я пытаюсь создать веб-страницу с фиксированным фоном (это означает, что ширина равна 100%, а высота не прокручивается), но основной div страницы, содержащий все содержимое страницы, можно прокручивать в направлении y. Вы можете увидеть эффект здесь http://btemplates.com/2016/blogger-template-topgames/demo/. Можно ли добиться этого эффекта, используя только html и css? если нет то как это можно сделать с javascript?

Ответы [ 2 ]

1 голос
/ 12 января 2020

Да, вы можете легко сделать это, используя фоновое изображение. Если вы посмотрите страницу, вы увидите, как они это сделали.

CSS: 

body {
   background: url('<<Your URL Here>>'), center top no-repeat fixed;
}

content-wrapper {
   width: 960px;
   margin: 46px auto 0px;
   padding: 0px;
}

HTML: 

<body>
   <content-wrapper>
   </content-wrapper>
</body>

В будущем щелкните правой кнопкой мыши страницу и проверьте HTML и CSS и вы сможете понять большинство вещей.

0 голосов
/ 12 января 2020

Я не знаю, как правильно использовать javascript, но я могу добиться этого без javascript. Самая важная часть кода находится в CSS, и это единственное, что я опубликую здесь (в html вам просто нужно обернуть всю страницу в главном разделе, и все). Самый распространенный способ сделать это - использовать background-attachment: fixed; , но CSS, который я использую, также совместим с мобильными устройствами. Мне нравится делать центральное деление несколько прозрачным, поэтому я также отправил определенный c цвет фона, определенный в: root. Но вы можете не делать этого. Я не очень хорошо справляюсь с этим сайтом и поэтому пришлю вам CSS, как будто это код Я надеюсь, что это полезно для вас:) 

:root {
    --color-blue-transparent: rgba(30, 30, 50, 0.7);
}


main {
    background: var(--color-blue-transparent);
    margin: 20px 200px;
}


main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://i.pinimg.com/originals/79/bd/fa/79bdfaed82cd091e1ba5b625e0c5976d.jpg);
  background-size: cover;
}
...