圖片取代logo

發表於 2022-07-28 分類於 Html

圖片取代logo

我想要做的是把

連結藏到圖片裡

有美觀效果

又有搜尋效果

<body>
    <div class="img">
        <h1><a href="#">這個是連結</a></h1>
    </div>
</body>


.img h1 {
    float: left;
}

.img h1 a {
    background-image: url(img/istockphoto-500473821-612x612.jpeg);
    width: 300px;
    height: 150px; 
    /* 要加這行width跟height才有效用 */
    display: block; 
    
    /* 加以下三行才可以隱藏起文字 */
    text-indent: 101%; /* 首行縮排*/
    white-space: nowrap;    /* 不要讓文字斷行*/
    overflow: hidden;   /*把文字隱藏起來*/
}