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

修改

现在，如果您想要修复图片，则必须添加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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您也可以使用伪元素加载图片：

＆＃13;

#body {
	width: 100%;
	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;
}

＆＃13;

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

＆＃13;

Answer 4

根据css规则，您需要确保以下事项： -

＆＃34; #header .inner h1 a＆＃34;规则应该是＆＃34;身高＆＃34;，＆＃34;宽度＆＃34;属性，特别是当你想使用＆＃34; background＆＃34;属性。
确保您声明的图片路径正确无误。

#header .inner h1 a {
    背景：#eee url（＆＃39; http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png＆＃39;）no-repeat;
    显示：块;
    float：left;
    身高：50px;
    位置：固定;
    宽度：50px;
}

这应该可以解决问题。

CSS将标题h1标记更改为徽标

4 个答案: