背景顏色環繞圖像

我希望我的頁面徽標位於黑色背景包圍的左上角。但是，背景顏色不包含圖像右側的區域。我正在使用HTML和CSS。背景顏色環繞圖像

這是我的代碼：

#title { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 
#title img { 
 
    width: 50%; 
 
    height: 50%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" type="text/css" href="index.css" media="screen" /> 
 

 
<body> 
 
    <div id="title"> 
 
    <a href="index.html"> 
 
     <img src="http://i.stack.imgur.com/WE2r4.png" align="left" /> 
 
    </a> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-07-11 Pauline Borlongan

刪除align="left"屬性。因爲如果你做形象float: left，但是你從來沒有這麼父崩潰後清除浮動，你根本無法看到它的背景作用類似於：

#title { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 
#title img { 
 
    width: 50%; 
 
    height: 50%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" type="text/css" href="index.css" media="screen" /> 
 

 
<body> 
 
    <div id="title"> 
 
    <a href="index.html"> 
 
     <img src="http://i.stack.imgur.com/WE2r4.png" /> 
 
    </a> 
 
    </div> 
 
</body> 
 

 
</html>

如果你想向左標誌 - 對齊應該使用#title的text-align: left，它會正常工作，因爲默認情況下img是內聯塊。

來源

2015-07-11 07:46:27 dfsq

你必須顯示規則添加到您的標題元素，使其實際上得到的流佈局：

#title { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 
#title img { 
 
    width: 50%; 
 
    height: 50%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" type="text/css" href="index.css" media="screen" /> 
 

 
<body> 
 
    <div id="title"> 
 
    <a href="index.html"> 
 
     <img src="http://i.stack.imgur.com/WE2r4.png" align="left" /> 
 
    </a> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-07-11 07:46:42 arkascha

背景顏色環繞圖像

回答

相關問題