2

私は、initializr.com からレスポンシブ バージョンの html5 ボイラープレートを使用しています。私のサイトではカスタム ロゴを使用しているため、.ir クラスを h1 に追加しました。

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

このような

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

ドキュメントによると

image-replacement を適用する任意の要素に .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/

4

1 に答える 1

2

.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-06T03:34:41.403 に答える