Question

我已经提到了这个question，但它可以帮助我。我正在尝试更改图片标记内的span标记高度和宽度，但它不起作用，这是我的代码：

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

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

THANKYOU

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

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

2 个答案: