html5boilerplate中的響應標誌（圖片替換）

我通過initializr.com使用html5樣板的響應版本。我的網站使用自定義的標誌，所以我增加了.IR類H1html5boilerplate中的響應標誌（圖片替換）

.ir { 
    background-color: transparent; 
    border: 0; 
    overflow: hidden; 
    *text-indent: -9999px; 
}

這樣

<h1 class="title ir">h1.title</h1>

的documentation說

添加.IR類你是任何元素將圖像替換應用於。當用圖像替換元素的內容時，請確保還設置了特定的background-image：url（pathtoimage.png），寬度，和高度，以便顯示替換圖像。

所以我加入到這些代碼行

.ir { 
background-image: url(http://i.imgur.com/yYnyJ.jpg); 
background-size: 100% auto; 
width:450px; 
height:450px 
}

問題是特定的寬度和高度。我無法擺脫它們，但徽標沒有反應這種方式。想法？這是小提琴。 http://jsfiddle.net/qeW3e/

來源

2012-10-05 Barbara

您的jsfiddle顯示什麼.. – Nelson

@Nelson嗯，我的作品。我可以做一個新的，但基本上我只是從郵件的代碼。它沒有出現給其他人？ – Barbara

在一個選項卡中打開imgur圖像後，jsfiddle在刷新後顯示它..你能解釋「logo不響應了嗎？」嗎？你希望徽標如何響應？ – Nelson

我認爲這是指設置元素的寬度和高度，您的目標，而不是在.ir css類本身。

實際的解決方案可能看起來更像這樣的網站。

HTML

<div class="header"> 
<div class="logo"><h1 class="title ir">h1.title</h1></div> 
<div class="navigation"><p>navigation goes here</p></div> 
</div>

CSS

.ir { 
    background-color: transparent; 
    border: 0; 
    overflow: hidden; 
    text-indent: -9999px; 

    background-image: url(http://i.imgur.com/yYnyJ.jpg); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
} 
.header {height:300px;} 
.logo {width: 30%; float:left; height: 100%;} 
.logo h1 {display:block;} 
.navigation {float:left; width: 65%;}

這裏是小提琴例如

http://jsfiddle.net/qeW3e/1/

來源

2012-10-06 03:34:41 justinavery

html5boilerplate中的響應標誌（圖片替換）

回答

相關問題