2015-07-11 3 views
5

Я хочу, чтобы логотип моей страницы в левом верхнем углу был окружен черным фоном. Однако цвет фона не охватывает область справа от изображения. Я использую 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>

ответ

0

Удалить 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>

Если вы хотите сделать логотип левым -aligned вы должны использовать text-align: left из #title, он будет работать правильно, потому что img является встроенным блоком по умолчанию.

0

Вы должны добавить правило отображения для вашего заголовка элемента, так что он фактически получает размещение в потоке:

#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>

Смежные вопросы