无法更改图像标记内的跨度高度和宽度
我已经提到了这个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
首先,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
可能重复[高度和宽度是否不适用于跨度?]( http://*.com/questions/2491068/does-height-and-width-not-apply-to-span) –
''?必须是这样的'
'你不能在里面添加html –
winresh24
浏览器不会在'img'中嵌套'span',因为'img'不能是父类。浏览器会把它放在'img'下面,而忽略/删除'' – 4castle