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

Posted 2023-03-06

【中文标题】无法更改图像标签内的跨度高度和宽度

【英文标题】：Not able to change span height and width inside image tag

【发布时间】：2016-09-11 19:04:05

【问题描述】：

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

html

<img class="profile_pic"  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;
     

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

谢谢你

【问题讨论】：

Does height and width not apply to span?的可能重复

</img> ?一定是这样<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />里面不能加html

浏览器不会将span 嵌套在img 中，因为img 不能是父级。浏览器会将其置于img 下方，并忽略/删除</img>

【参考方案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"  />

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

【讨论】：

谢谢你，但我想将 div 标签覆盖在 Image 标签上，我该怎么做

【参考方案2】：

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

<img class="profile_pic"  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" >
                  <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);

.containerposition:relative;
  max-width:300px;
  

.container imgwidth:100%;
display:block;
 

这里是 jsfiddle： DEMO

【讨论】：

谢谢它有效，但我希望跨度在没有发生的图像上可见

您想将跨度叠加到图像上吗？

是的，我该怎么做