CSS-позиция div дает неожиданный результат - PullRequest
Новая
       8

CSS-позиция div дает неожиданный результат

0 голосов
/ 17 мая 2018

Я делаю сайт портфолио. После фиксированного положения полупрозрачной анимации градиента и изображения элемент margin изображений не работает. При создании элемента #images я хотел быть под текстом 10vh. Я ожидал, что изображение будет под текстовым элементом. Но образец изображения находится сверху и смещает градиент вниз. Почему и как поставить #images под текстом?

https://codepen.io/abooo/pen/erQWBQ?editors=1100

Ответы [ 2 ]

0 голосов
/ 17 мая 2018 
    <html>
    <head>
        <link rel="stylesheet" href="css/style.css"> 
    </head>

    <body>
        <div id='overlay'></div>
        <div id='images'>
            <img src='https://www.gstatic.com/webp/gallery/1.jpg' alt='gallery'/>
        </div>
        <div id='containerText'>
              <div id='text'>Hi!</div>
        </div>
        <div class='text'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mattis quam sit amet sollicitudin. Vivamus quis ullamcorper velit. Phasellus vitae quam id libero tempus tempor in in velit. Maecenas at arcu nec felis feugiat mollis. Quisque et velit eu enim ullamcorper vestibulum eu convallis justo. Donec scelerisque purus ipsum, ut consequat enim scelerisque vitae. Aliquam dignissim massa non dolor sollicitudin, eleifend aliquam urna commodo. Pellentesque ut tristique erat. Sed non nisl ac odio consectetur tincidunt. Integer turpis sem, viverra et vulputate ut, dignissim id diam. Nullam venenatis, ante rhoncus tincidunt pulvinar, ex velit blandit nisi, ut laoreet ex odio vitae metus. Morbi arcu elit, congue a nisl vitae, euismod facilisis sapien. Donec gravida, lorem eu volutpat tristique, lectus erat pharetra justo, a aliquam massa quam tincidunt purus. Phasellus eu fringilla sapien. Quisque imperdiet magna sed sapien rutrum, quis mattis libero convallis. Vivamus non luctus leo.

        </div>          

    </body>
</html>

Попробуйте HTML и CSS выше.

0 голосов
/ 17 мая 2018 
 *{margin:0;padding:0;}
html { 
   height:100%;
   width:100%;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
div#overlay{
    position:fixed;
    opacity:0.5;
    background: linear-gradient(224deg, #a18cd1, #fbc2eb, #fbc2eb, #a6c1ee, #f6d365, #fda085, #84fab0, #8fd3f4, #a6c0fe, #f68084, #fccb90, #d57eeb, #e0c3fc, #8ec5fc, #f093fb, #f5576c, #4facfe, #00f2fe, #43e97b, #38f9d7, #30cfd0, #330867, #667eea, #764ba2, #fddb92, #d1fdff, #00c6fb, #005bea, #b721ff, #21d4fd, #d558c8, #24d292, #09203f, #537895);
background-size: 6800% 6800%;
height:100%;
width:100%;
-webkit-animation: GardientOverlay 200 ease infinite;
-moz-animation: GardientOverlay 200 ease infinite;
-o-animation: GardientOverlay 200s ease infinite;
animation: GardientOverlay 200s ease infinite;

}
@-webkit-keyframes GardientOverlay {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-moz-keyframes GardientOverlay {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@-o-keyframes GardientOverlay {
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}
@keyframes GardientOverlay { 
    0%{background-position:99% 0%}
    50%{background-position:2% 100%}
    100%{background-position:99% 0%}
}

div#text{
font-size:calc(6vh + 6vw);
}
div#containerText{
    padding:1vw;
    opacity:0.7;
    position:absolute;
    top:0;
    height:100vh;
    background-color:white;
    z-index:10;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

text-align:center;
  display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center;
}
.text{
    left:0;
    width:100vw;
    top:100vh;
    position:absolute;
    background-color:white;
    padding:calc(1vh + 1vw);
   box-sizing: border-box;
   font-size:2vmax;
}
div#images{
    height:100vh;
    width:100vw;
}
div#images img{
    width:inherit;
    height:inherit;
}
...