Question

我在这里创建了一个codepen：

第一张图片：原始图片。当您将鼠标悬停在它上面时，它会发生变化。第二张图片：我尝试编辑CSS。第三张图片：我试图将第三张图片中的红色条放在上面的图像上 - 原始图像和悬停图像。

我尝试过边境，但它并没有很好地工作，我没有想法。如果可以的话，我会非常有兴趣了解它是如何完成的。

红色条应位于图像顶部，而不是位于图像顶部。

感谢。

<!-- unedited original -->    
<div class="bord crossfd">

    <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35o-min.jpg" style="width: 300px;"></img>
    </div>
<!-- end of unedited original -->

<!-- my attempt -->
<div class="bord2 crossfd2">
    <h3 style="margin-top:-30px">Chapter 31</h3>  
  <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35o-min.jpg" style="width: 300px;"></img>
    </div>
<!-- end of my attempt -->

<!-- what I'm trying to achieve -->
  <div class="inline">
    <img src="http://stagehypnosisuniversity.com/wp-content/uploads/2017/04/Untitled-3.jpg" style="width: 300px;"></img>
    </div>
<!-- end -->

/* CSS for original */

.bord{
padding: 0;
margin: 0;
}

.crossfd{
background: url("http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
display: inline-block;
font:size: 0;
}

.inline{
  display: inline-block;
}

.crossfd img{
-webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.crossfd img:hover{
opacity: 0;
}

/* end of CSS for original */

/* My attempt by adding a border*/

.bord2{
padding: 0;
margin: 0;
border-style: solid;
border-color: #CA3537;
border-width: 33px 0 0 0;
}

.crossfd2{
background: url("http://stagehypnosisuniversity.com/wp-content/uploads/2017/03/35t-min.jpg");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
display: inline-block;
font:size: 0;
}

.crossfd2 img{
-webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.crossfd2 img:hover{
opacity: 0;
}

Answer 1

使用带有position:absolute的div来插入文字

.container{
    position:relative;
    width: 200px;
    height: 200px;
    background: black;
}

.text{
    width: 100%;
    position:absolute;
    background-color:red;
    top:0px;
    left:0px;
}

p {
    text-align: center;
    padding:5px;
    margin:0px;
}

<div class=container>
    <div class=text>
      <p> HELLO </p>
    </div>
    
</div>

将单词添加到div的边框 - 或者其他类似的东西

1 个答案: