无法更改图像标签内的跨度高度和宽度

Question

我已经提到了这个question，但它对我有帮助。我正在尝试更改图像标签内的跨度标签 height and width 但它不起作用，这是我的代码：

html

<img class="profile_pic" alt="Sumanth Jois" src="file/someimage">
           <span  class="changePicture">HelloThere</span>     
 </img>

CSS

     //There are many spans so I am using the . operator to specify
     span.changePicture{
        width: 100px;
       height:200px;
       background-color:red;
        margin-left: -150px;
        color: white;
        margin-top: -20px;
     }

我无法使用此代码更改宽度和高度。我可以知道如何解决这个问题吗？

谢谢你

Answer 1

首先，span 是一个单行元素。所以没有height。

第二，图片不是：<img> </img>

图片标签是单个标签<img />

尝试使用div 而不是span。并且可以在其中添加span。

span 默认情况下是一个内联元素，它不能接受宽度和高度属性，但您可以使用display: block; 或display: inline-block; 为其设置高度/宽度。

片段覆盖图像：

div {
  top: 10px;
  left: 20px;
  position: absolute;
  color: #FFF;
}

<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />

<div>
  <H1>Text </H1>
</div>

Answer 2

首先你使用img标签的方式不对，html必须是这样的：

<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />
           <span  class="changePicture">HelloThere</span>  

只需将 display:block; 添加到 css 以设置高度和宽度

 span.changePicture{
        width: 100px;
       height:200px;
       background-color:red;
        margin-left: -150px;
        color: white;
        margin-top: -20px;
        display:block; /*added*/
     }

已编辑：

为此，您需要像这样将图像放入 div 中：

<div class="container">
    <div class="background-img">
          <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
                  <div class="overlay">
                  <span>Text</span>
                  </div>
     </div>            
</div>

这是css：

.background-img .overlay{
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.background-img .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
  max-width:300px;
  }

.container img{width:100%;
display:block;
 }

这里是 jsfiddle： DEMO