無法更改圖像標記內的跨度高度和寬度

我已經提到了這個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

來源

2016-05-16 KeyStroke

可能重複[高度和寬度是否不適用於跨度？]（ 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>

來源

2016-05-16 03:40:07

'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

來源

2016-05-16 03:41:56 winresh24

Thankyou它的工作原理，但我想跨越可見的圖像，這是不發生 – KeyStroke

你想覆蓋的跨度圖像？ – winresh24

是的我怎麼能這樣做 – KeyStroke

無法更改圖像標記內的跨度高度和寬度

回答

相關問題