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

Question

我在这里创建了一个代码笔:

https://codepen.io/aabarker/pen/WjQMjW

第一张图片:原始图片。当您将鼠标悬停在它上面时，它会发生变化。 第二张图片:我尝试编辑 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>