Question

我正在制作投资组合网站。在位置固定半透明渐变动画和图像后，margin图像元素不起作用。在创建元素#images时，我想要在文本10vh下。我希望图像在文本元素下。但是样本图像位于顶部并向下移动渐变。为什么以及如何将#images置于文本下？

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

Answer 1

 *{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;
}

Answer 2

    <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。

Css位置div给出意想不到的结果

2 个答案: