0

新しいレスポンシブ サイトを開発しています ... のホームページをご覧ください > www.living-heart.nl/txp

この IR テクニックに従って、すべてが (ほぼ) 機能しています > www.zeldman.com

2 つの質問があります。

1) 右側に H1 が少し見えます (Firefox/Mac) ... あなたも？H1 に text-indent を追加することで非表示にすることができます... 101% で十分です。それでいいですか？

2) 画像を無効にした場合、テキスト (H1) を元に戻すにはどうすればよいですか?

私を助けてくれてありがとう。

/* New Image Replacement > http://wp.me/p4WtR-2xq */
hgroup {
    padding: 1em 0 0 0;
}
h1 {
    font-family: lavanderia_sturdysturdy, cursive;
    color: #fff;
    font-size: 4em;
    line-height: 100%;
    background: url(../design/living-heart_logo-05.gif) no-repeat center 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 1.2em;
}
h2 {
    text-align: center;
    font-size: 2.8em;
    color: #6d8677;
    line-height: 1.2em; /* 120% van 16px */
    margin-bottom: 0;   
    font-family: 'IM Fell English', Georgia, Times, "Times New Roman", serif;
}
4

3 に答える 3

1

1) 101% で十分です。それでいいですか？

私はいつもtext-indent: 110%;;を使います。機能することを確認するためだけです（値が の場合、ページをズームインするとテキストが表示されることがあります100%）

2) 画像を無効にした場合、テキスト (H1) を元に戻すにはどうすればよいですか?

この置換技術では、これを行う方法はありません。

たとえば、これを行うには Shea 画像置換メソッドが必要です。次のリンクされた WP 記事を参照して、「 Shea メソッド」を検索してください: https://en.wikipedia.org/wiki/Fahrner_Image_Replacement (このメソッドには、置換された要素内に追加の要素が必要です。ここで疑似要素を使用できる可能性があります – I'それは試したことがない）

于 2012-10-17T10:31:18.680 に答える
0

これは私が過去に使用したものです-それは少し簡単です：

h1 {
  overflow: hidden;
}

h1 span {
  width: 100%;
  display: block;
  margin-left: -100%;
}

そしてマークアップ：

<h1>
  <span>
    My Title with lots of text so
    that if and when it wraps nothing 
    goes wrong, and I don't have to rely 
    on nowrap
  </span>
</h1>

これは、nowrapのサポートが特定のエージェントで100％信頼できるわけではないためです。また、テキストコンテンツで何をするかをより細かく制御できることを意味するため、ターゲットとする2次要素を持つことにも利点があります。

明らかに、正または負のマージンを使用できます。万が一overflow:hidden失敗した場合、左にシフトするとテキストコンテンツが非表示になる可能性が高く、スクロールバーが表示されないため、ネガティブを好みます。私が言ったように、それは個人的な好み次第です。

無効にされた画像

残念ながら、無効/有効な画像を使用することはできませんが、私が知っている唯一の解決策は、feelaによってすでに提案されているものです-これは明らかに透明な画像では機能しません：/

実際には、1つの可能性があります。それは、で複数の背景画像を使用することShea methodです。したがって、基本的にページの背景を繰り返してから、テキスト画像を上に重ねます。ただし、中央に配置されたサイトがある場合は、そのサイトを使用background-attachment: fixedして正しく機能し、配置できることを確認する必要があります。明らかに、これは複数の背景画像をサポートするブラウザでのみ機能します...ただし、この動作を偽造するために別の要素レイヤーを追加することもできますが、その後、状況が乱雑になり始めます。

于 2012-10-17T11:09:04.073 に答える
0

追加のマークアップを必要とせずに画像を無効にして機能する IR 手法があります: http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/

.nir {
   height:100px; /* height of replacement image */
   width:400px; /* width of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:inline-block;
   font-size:0;
   line-height:0;
}

:before古いブラウザはまたはを理解できませんcontentが、少なくともテキストを見ることはできます。

于 2012-10-17T12:04:37.163 に答える