Question

我正在尝试将CSS中的图像作为背景，因为我不希望它们是可突出显示的（按住左键单击并查看stackoverflow徽标。看到你不能）当我使用img元素时，它变得高亮。现在回答我的问题

我不明白为什么我的徽标会不断重演......

<!DOCTYPE html>
<html>
<head>
<title>Hail Coding!!</title>
<style>
#page {
    font:5px;
    width:2000px;
    font-family:verdana;
    background-color;#FFF;
    margin-left:auto;
    margin-right:auto;

}
#header {
    height:217px;
    width:1000px;
}

#logo {
    background-image:url(http://i.imgur.com/oBD9Got.jpg);
    background-repeat:no-repeat;
    width:120px;
    height:120px;
    background-size:120px 120px;
    display:block;
}
</style>
</head>
<body>
    <div id="page">
        <div id="header">       
            <p id="slogan">Hail Coding!</p>
            <a href="introppage.html"id="logo"</a>




        </div>  
    </div>
</body>
</html>

Answer 1

因为您错过了>标记上的<a>。

更改此内容：<a href="introppage.html"id="logo"</a>

对此：<a href="introppage.html"id="logo"></a>

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/9juemx9p/

Answer 2

我强烈建议您从head标签中取出样式并放入单独的.css文件中。

好的 - 关于手头的问题。

<!DOCTYPE html>
<html>
<head>
<title>Hail Coding!!</title>
<style>
#page {
    font:5px;
    width:2000px;
    font-family:verdana;
    background-color;#FFF;
    margin-left:auto;
    margin-right:auto;
 }
 #header {
    height:217px;
    width:1000px;
 }

 #logo {
    background: url(http://i.imgur.com/oBD9Got.jpg) no-repeat center;
    background-repeat:no-repeat;
    width:120px;
    height:120px;
    background-size:contain;
    display:block;
 }
 </style>
 </head>
  <body>
    <div id="page">
        <div id="header">       
           <p id="slogan">Hail Coding!</p>
           <a href="introppage.html"id="logo"></a>
        </div>  
    </div>
  </body>
</html>

所以请记住始终关闭标签。在这种情况下，缺少＆gt;。另外，您始终可以“包含”background-size。

我建议特别是在CSS Tricks阅读CSS，这是他们精湛的年历，提供技巧，模式和一般的精彩。

祝你好运，玩得开心！

为什么我的图像会不断重复？

2 个答案: