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

问题描述：

我已经提到了这个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

可能重复[高度和宽度是否不适用于跨度？]（ http://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span） –

''？必须是这样的' Sumanth Jois '你不能在里面添加html – winresh24

浏览器不会在'img'中嵌套'span'，因为'img'不能是父类。浏览器会把它放在'img'下面，而忽略/删除'' – 4castle

答

首先，span是一行元件。所以没有height。

其次，图像不是：<img> </img>

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

使用的div代替span尝试。并可能在其中添加span。

span是默认不能采取width和height属性但也可以使用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>

'ThankYou但我想覆盖在标签上的div标签我怎么能这样做 – KeyStroke

检查这个：[fiddle]（http：// jsfiddle .net/enb178qy /）或上面的代码片段。 –

答

首先你使用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

Thankyou它的工作原理，但我想跨越可见的图像，这是不发生 – KeyStroke

你想覆盖的跨度图像？ – winresh24

是的我怎么能这样做 – KeyStroke

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

相关推荐