Question

我需要让我的徽标显示在此着陆页的顶部，我不知道该怎么做。我使用了一个模板，当我把我的徽标放在所有内容中时，我看到的是顶角。有人能帮助我让我的徽标完全显示出来吗？（供参考，here is the site）

这是html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juicy Pear Development</title>
<link href="tools/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="container">
    <a class="logo" href="#"><span>The</span> Company</a>
    <h2>Coming Soon</h2>
    <p>The Juicy Pear site is currently under construction. We are working hard to get it up an running!</p>
    <ul class="information">
        <li class="two"><span>Info</span>info@juicypear.com</li>
    </ul>

    <div class="clear"></div>
    <!--<ul class="social">
        <li class="fb"><a href="#"></a></li>
        <li class="tw"><a href="#"></a></li>
    </ul> -->
</div>

</body>
</html>

这是CSS：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

body{
margin:0;
padding:0;
background: #fcf9f7 url(../images/bg.gif) repeat;
font-family: Museo, 'ABeeZee', sans-serif;
}

.container{
width: 700px;
margin: 0 auto;
text-align: center;
}

a.logo{
width: 95px;
padding: 125px 20px 16px;
margin: 0 auto;
display: block;
text-decoration: none;
font-family: Helvetica Neue, Helvetica, Arial;
color: #fff;
text-transform: uppercase;
background: url(../images/logo.png) left top no-repeat;
text-align: left;
text-shadow:1px 1px 1px #165929;
font-size: 18px;
margin-bottom: 30px;
line-height: 18px;
}


a.logo span{
font-size: 14px;
}

a.logo:hover{
text-decoration: underline;
}

h2{
font-size: 40px;
color: #636466;
margin-bottom: 20px;
}

p{
font-size: 15px;
line-height: 28px;
color: #636466;
text-shadow:1px 1px 1px #ffffff;
}

ul.information{
width: 700px;
float: center;
margin-top: 22px;
margin-bottom: 40px;
}


ul.information li{
float: center;
height: 100px;
color: #636466;
font-size: 16px;
text-align: center;
padding: 20px 0 0 0;
margin: auto;
}

ul.information li a{
color: #636466;
text-decoration: none;
}

ul.information li a:hover{
color: #636466;
text-decoration: underline;
}


ul.information li.one{
width: 243px;
background: url(../images/divider.png) right no-repeat;
}

ul.information li.two{
width: 169px;
background: url(../images/divider.png) right no-repeat;
}

ul.information li.three{
width: 288px;
}



ul.information li span{
font-size: 40px;
display: block;
}

.clear{
clear: both;
}

ul.social{
width: 303px;
margin: right;
}

ul.social li{
width: 91px;
height: 29px;
float: left;
}

ul.social li a{
width: 91px;
height: 29px;
display: block;
}

ul.social li.fb{
background: url(../images/social.png) left top no-repeat;
margin-right: 15px;
}

ul.social li:hover.fb
{
background: url(../images/social.png) left bottom no-repeat;
}


ul.social li.link{
background: url(../images/social.png) -108px top no-repeat;
margin-right: 15px;
}

ul.social li:hover.link
{
background: url(../images/social.png) -108px bottom no-repeat;
}


ul.social li.tw{
background: url(../images/social.png) -221px top no-repeat;
}

ul.social li:hover.tw
{
background: url(../images/social.png) -221px bottom no-repeat;
}

Answer 1

在徽标类中添加背景大小属性。如果要显示大徽标，还要增加width属性。

a.logo{
width: 95px;
padding: 125px 20px 16px;
margin: 0 auto;
display: block;
text-decoration: none;
font-family: Helvetica Neue, Helvetica, Arial;
color: #fff;
text-transform: uppercase;
background: url(../images/logo.png) left top no-repeat;
text-align: left;
text-shadow:1px 1px 1px #165929;
font-size: 18px;
margin-bottom: 30px;
line-height: 18px;
 background-size:100%;
}

Answer 2

使用带有src =＆＃34; folder / image.png＆＃34;的HTML img标记，而不是从CSS表中获取图像。在标签内。然后在css中编辑图像而不是设置其背景，因为它可能会出现许多问题。希望它有所帮助！

img标签： http://www.w3schools.com/tags/tag_img.asp

示例：

    <h1>The Company</h1>
    <img src="example/example.png" />

如何将图片添加到我的网页顶部？

2 个答案: