Невозможно изменить высоту и ширину проема внутри тега изображения

Question

Я указал это question, но это помогает мне. Я пытаюсь изменить пролетные тег высоту и ширину внутри тега изображений, но он не работает, и это мой код:

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

I я не могу изменить ширину и высоту с помощью этого кода. Могу ли я решить, как это решить?

ThankYou

Answer 1

Во-первых, это span один элемент строки. Так что нет height.

Во-вторых, изображение не: <img> </img>

Image тег один тег <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*/ 
    } 

EDITED:

Для этого вам нужно поместить изображение в 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