Вопросы Теги

Как мне уменьшить размер моего фонового изображения, не перекрывая содержимое моей веб-страницы

Хорошая дискуссия по этой теме в старых статьях «Гуру недели» на comp.lang.c ++. moderated здесь .

Соответствующая статья GOTW доступный на веб-сайте Herb Sutter здесь .

0
задан Amine KOUIS 2 March 2019 в 04:04
поделиться

1 ответ

Вот что вам нужно изменить / добавить в вашем CSS: 

/*-------------login-----------*/
.login-box{
  position: relative;
  height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

ваш родительский div вашего раздела входа .login-box ) требуется значение «position» (например, position: относительное), тогда ваш Login Box получает позицию внутри .login-box .

с фоновым изображением вы должны установить конкретную высоту для вашего родительского div.

Если вы используете тег изображения внутри вашего .login-box div, то div будет такой же высоты, как и само изображение

пример выполнения (полный код): 

html body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  background-color: black !important;
}


/*-------------header-----------*/

header {
  height: 110px;
  line-height: 110px;
  position: fixed;
  z-index: 1;
  width: 100%;
}

.secondary {
  background-color: darkorange;
  box-shadow: 0px 0px 15px 0px;
  transition: all 0.5s ease-in-out;
}


/*-------------nav-----------*/

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

header nav {
  float: right;
}

.logo img {
  margin-top: -20px;
  height: 30px;
}

header nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

header nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/*-------------slider-----------*/

.img1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider,
.slider ul,
.slider ul li {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  padding: 0px;
}

.slider h2 {
  font-weight: bold;
  margin-top: 260px;
}

.slider span {
  color: orange;
}

.slider a {
  padding: 10px 40px;
  margin-right: 10px;
}


/*-------------slider-button-----------*/

.slider a.btn-half {
  background-color: orange;
  color: white;
  width: 200px;
}

.slider a.btn-half:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}

.img2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.img3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider i {
  font-size: 30px;
  margin-right: 10px;
}


/*-------------login-----------*/
.login-box{
position: relative;
height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.login-box h1 {
  width: 100px;
  font-size: 40px;
  border-bottom: 6px solid darkorange;
  margin-bottom: 50px;
  padding: 13 px 0;
}

.textbox {
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  padding: 8px 0;
  margin: 8px 0;
  border-bottom: 1px solid darkorange;
}

.textbox i {
  width: 26px;
  float: left;
  text-align: center;
}

.textbox input {
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 17px;
  width: 80%;
  float: left;
  margin: 0 10px;
}

.btn {
  width: 100%;
  background: none;
  border: 2px solid darkorange;
  color: white;
  padding: 5px;
  font-size: 17px;
  cursor: pointer;
  margin: 12px 0;
}

.btn:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}


/*-------------FAQ-----------*/

.fqcontainer {
  max-width: 60%;
  margin: 0 auto;
  padding: 70px 0 20px;
  width: 100%;
}

.fqcontainer h1 {
  text-align: center;
  font-family: 'roboto', 'sans-serif';
  font-size: 60px;
  margin: 50px 0 0;
  color: white;
}

.acc {
  border-bottom: 1px solid white;
}

.acc h3 {
  font-size: 25px;
  background-color: black rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px;
  margin: 0;
  cursor: pointer;
  font-family: 'roboto', 'sans-serif';
  letter-spacing: 2px;
  position: relative;
}

.acc h3:after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.acc.active h3:after {
  content: '-';
}

.fqcontent {
  background-color: white;
  margin-top: 0;
  line-height: 1.5;
  display: none;
}

.content-inner {
  padding: 15px;
}


/*-------------footer-----------*/

.footer {
  width: 100%;
  background-color: darkorange;
  padding: 50px 0px;
}

footer nav {
  text-align: center;
}

footer nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

footer nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/* CHANGES */

.slider {
  overflow: hidden;
  max-height: 100vh;
}
<body>

  <!-------------Header/Nav----------->


  <header>
    <div class="container">
      <div class="row">
        <a href="index.html" class="logo"><img src="logo.png"></a>
        <nav>
          <ul>

            <li><a href="#login-box">Log In</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">My Surveys</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-------------Slider----------->

  <section class="slider">
    <ul class="slider-carousel" id="slider-carousel">

      <li class="img1">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img2">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img3">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>

    </ul>

  </section>

  <!-------------Login----------->

  <div class="login-box">
    <div id="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Username" name="" value="">
      </div>


      <div class="textbox">
        <i class="fas fa-lock"></i>
        <input type="text" placeholder="Password" name="" value="">
      </div>

      <input class="btn" type="button" name="" value="Sign In">

    </div>
  </div>

  <!-------------FAQ----------->


  <div class="fqcontainer">
    <h1>FAQ Section</h1>
    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

  </div>

  <!-------------Footer----------->

  <footer>
    <div class="footer">
      <nav>
        <ul>
          <li><a href="">Log In</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">My Surveys</a></li>
        </ul>
      </nav>
    </div>
  </footer>


  <script src="main.js"></script>

</body>

</html>

0
ответ дан Artur Leinweber 2 March 2019 в 04:04
поделиться