изменить CSS заголовок тега h1 в логотип

Question

Я пытаюсь заменить этот

<h1><a href="itw1.html"><span>FITLayout</span></a></h1>

линию с логотипом ведьма должен быть помещен после моего верхнего меню с фиксированным положением. Но когда я применяю свой CSS-код, ничего не отображается.

Это, как я пытаюсь применить код CSS:

#header .inner h1 a { 
    float: left; 
    display: block; 
    background:url('https://www.google.cz/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiJxavlxfLLAhVBORQKHbAaB2MQjRwIBw&url=http%3A%2F%2Fdesign.ubuntu.com%2Fdownloads%3Fmetadata%3Delement-logo%2Bbrand-ubuntu&psig=AFQjCNGNBTguZJPq3hjdH5AHeMs-P7V1dQ&ust=1459775537916571') no-repeat; 
} 

#header .inner h1 span { 
    display: none; 
} 

HERE является примером моей проблемы, и я могу изменить только код CSS.

Есть ли какие-либо решения, пожалуйста?

Answer 1

Вы проверили, был ли ваш путь к изображению действительным? Потому что это не так.

Check this code with a correct image path

#header .inner h1 a { 
    display: block; 
    background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat; 
    width: 100%; height: 200px; 
} 

EDIT

Теперь, если вы хотите, чтобы изображение, которое будет решена, вы должны добавить position: fixed; и указать width и height. Вы также должны добавить padding-top в список, чтобы сделать его видимым.

Like this

#header .inner h1 a { 
    display: block; 
    background:url('http://lorempicsum.com/futurama/350/200/1') no-repeat; 
    height: 200px; 
    background-size: cover; 
    position: fixed; 
    left:8px; right: 0; 
} 

#menubar { padding-top: 200px; } 

Answer 2

С единственным ребенком <span> набором для display:none родительского <a> тег имеет нулевую ширину и высоту. Вы можете вручную установить width и height на основе размера фонового изображения.

h1 a { 
 
    background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') no-repeat; 
 
    display: block; 
 
    width: 272px; 
 
    height: 92px; 
 
} 
 
h1 a span { 
 
    display: none; 
 
}

<h1><a href="itw1.html"><span>FITLayout</span></a></h1>

Answer 3

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

#body { 
 
\t width: 100%; 
 
\t height: 900px; 
 
} 
 

 
#header { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
#header .inner div { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    color: white; 
 
    background-color: #5f5f5f; 
 
} 
 

 
#header .inner #topmenu .login { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    float: right; 
 
    padding-right: 20px; 
 
    padding-top: -10px; 
 
    color: white; 
 
} 
 

 
#header .inner h1 a { 
 
    float: left; 
 
    } 
 
#header .inner h1 a:before { 
 
    content:url('http://design.ubuntu.com/wp-content/uploads/ubuntu-brandmark-thumb2.png'); 
 
} 
 

 
#header .inner h1 span { 
 
    display: none; 
 
}

<div id="body"> 
 
<header id="header"> 
 
\t <div class="inner"> 
 
\t \t <h1><a href="itw1.html"><span>FITLayout</span></a></h1> 
 
\t 
 
\t \t <div id="topmenu"> 
 
\t \t  <a href="#" class="login">Login</a> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="social" class="icons"> 
 
\t \t \t <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a> 
 
\t \t \t <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a> 
 
\t \t \t <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a> 
 
\t \t </div> 
 
\t 
 
\t \t <nav id="menubar"> 
 
\t \t <ul id="menu"> 
 
\t \t  <li class="dropdown"><a href="#">Company</a></li> 
 
\t \t  <li class="selected dropdown"><a href="#">Products</a></li> 
 
\t \t  <li class="dropdown"><a href="#">News</a></li> 
 
\t \t  <li class="dropdown"><a href="#">Downloads</a></li> 
 
\t \t  <li><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
\t \t </nav> 
 
\t </div> 
 
</header> 
 
</div>

Answer 4

Из правил CSS вы следующие вещи должны быть уверены, : -

1. «#header .inner h1 a» правило должно иметь свойство «высота», «ширина», особенно если вы хотите отображать изображение с использованием атрибута «background».

2. Убедитесь, что путь изображения, который вы указали, верен.

# заголовок.внутренний h1 a {
фон: #eee url ('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png') no-repeat;
дисплей: блок;
поплавок: левый;
высота: 50px;
позиция: фиксированная;
ширина: 50px;
}

Это должно сделать трюк.