どのようにサイトのHTML + CSSのロゴ部分を書くには？

ウェブサイトのロゴは、一般的に、H1タグに、ロゴ、しかし考えるとSEO、サイト名の背景画像は、上の書き込みをする必要がありますが、一般的にのみウェブサイトのロゴ画像、テキスト部分は表示されませんし、今日は見てみましょうどのようにそれを行うには！

この方法の一つ：

最初の書かれたHTMLの構造：

html部分：
<h1>
    <a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首页">
        CSDN
    </a>
</h1>

その後、背景のタグに設定されています： 

CSS部分：
a {
    display: inline-block;
    width: 90px;
    height: 44px;
    background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
    text-indent: 90px;
    overflow: hidden;
}

画像値の幅と一致ラベル最初の行のインデント値を設定し、テキストが絞り出さし、テキストのオーバーフローを非表示にすることができます設定されます！

方法2：

そのままHTMLコード：

html部分：
<h1>
    <a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首页">
        CSDN
    </a>
</h1>

 設定したラベルの高さが0である場合、セットマージントップ高マージントップボックスは、テキストを締め出し、完全な高さをサポートし、その後、流出ができる非表示になりますので、画像の高さです！

css部分：
a {
      display: inline-block;
      width: 90px;
      height: 0px;
      background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
      padding-top: 44px;
      overflow: hidden;
    }

どちらの方法でもああ、実現することができます！もちろん、あなたが別のああを試しに行くことができる多くの方法があります！