CSS改变航向h1标签为标志

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

线whitch应放在我的位置固定顶部的菜单之后。但是当我应用我的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代码。

有没有什么解决办法吗？

来源

2016-04-03 Petr Bečka

作为回答，您需要调整其他大小没有大小。 https://jsfiddle.net/eoadud8r/14/ –

你检查，如果你的图像路径是有效的？因为它不是。

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

编辑

现在，如果你想要的形象是固定的，你必须添加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; }

来源

2016-04-03 15:28:08

随着独生子女<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>

来源

2016-04-03 15:30:37 Stickers

你也可以使用一个伪元素加载图像：

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

来源

2016-04-03 15:46:09

从你下面的事情要做出肯定的CSS规则： -

“#header .inner h1 a”规则应该具有“height”，“width”属性，特别是当您要使用“background”属性显示图像时。
确保您声明的图像路径是正确的。

#表头。inner h1 a {
background：#eee url（'http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png'）no-repeat;
display：block;
float：left;
height：50px;
职位：固定;
width：50px;
}

这应该可以做到。

来源

2016-04-03 20:48:16

CSS改变航向h1标签为标志

回答

相关问题