Question

我试图把一个div放在一个图像上面，这个div是一个白色的盒子，在这个div里面有一个标题和一个段落元素，但我努力使白色框出现，文字出现，但白色盒子根本没有出现。

以下是我试图执行此操作的部分的代码，div的名称为＆＃34; info-container＆＃34;。我可以把文字放在图像上，但白框没有出现，你能帮助我吗？

HTML：

  <div class="row">
  <h1>SEE YOUR TOP ARTISTS</h1>
</div>


    <ul class="artists-showcase Clearfix">

        <li>
            <figure class="artist-photo">
                <img src="img/logic.jpg" alt="Logic">
                <div class="info-container">
                <h4>LOGIC</h4>
                <p>Twitter-API</p>
                </div>
            </figure>
        </li>

        <li>
            <figure class="artist-photo">
                <img src="img/avicci.jpg" alt="Avicci">                        
                <div class="info-container">
                <h4>LOGIC</h4>
                <p>Twitter-API</p>
                </div>
            </figure>
        </li>

        <li>
            <figure class="artist-photo">
                <img src="img/ed_sheeran.jpg" alt="Ed Sheeran">
                <div class="info-container">
                <h4>LOGIC</h4>
                <p>Twitter-API</p>
                </div>
            </figure>
        </li>

        <li>
            <figure class="artist-photo">
                <img src="img/eminem.jpg" alt="Eminem">
                <div class="info-container">
                <h4>LOGIC</h4>
                <p>Twitter-API</p>
                </div>
            </figure>
        </li>

    </ul>

CSS：

.section-artists {
    padding: 0;
} 

.artists-showcase {
    list-style: none;
    display: inline-block; /* Alinhamento centro */
    width: 110%;  /* Alinhamento centro */
    margin-left: -5%;  /* Alinhamento centro e full width */
    height: 100%;
    margin-top: 5%; 

}


.artists-showcase li {
    display: block;
    transform: skewX(-10deg);
    float: left;
    width: 25%;
    height: 100%;
}


.artist-photo {
    width: 100%;
    height: 100%;
    margin:0;
    overflow: hidden;
    background-color: #000;

}




.artist-photo img {
    opacity: 0.7;
    width: 150%;
    height: auto;
    -webkit-transform: scale(1.18) skewX(10deg); /* reverte o skew para a imagem ficar reta */
    transform: skewX(10deg);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
    transition: transform 0.5s, opacity 0.5s, filter 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;  
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;  
}


//*.artist-photo img:hover {
//    opacity: 1;
//    -webkit-transform: scale(1.03) skewX(10deg);;
//    transform: scale(1.03) skewX(10deg);
//    filter: hue-rotate(250deg);
/*/




/* Container com texto e titulo */

.info-container {
    background: #fff;
    width: 500px;
    height: auto;
    top: 50%;
    padding: 0;
    margin-bottom: -20%;
    z-index: 1000;
}

.info-container>h4 {
    float: left;
    position: absolute;
    top: 50%;
    left: 10%;
    z-index: 1000;
}

.info-container>p {
    float: left;
    position: absolute;
    top: 55%;
    left: 10%;
    z-index: 1000;
}

非常感谢你！

Answer 1

好的，这是我的尝试，

首先向info-container添加溢出并向其添加绝对位置，并使用margin h4和p进行对齐。

.artist-photo {
    position: relative
}

.info-container {
  position:absolute;
  top: //As per need;
  overflow: hidden;
}

从h4移除绝对位置，使用边距将其对齐

.info-container>h4 {
    float: left;
    margin-right: 10px;
}

.info-container>p {
    float: left;
}

试图将容器放在图像上

1 个答案: