1

サイズに関係なくdivをカバーする背景画像を取得する方法についてフォーラムを読み、「background-size」CSSプロパティを発見しました。これは宝石であり、Firefoxで美しく機能しますが、残念ながら私はIE8が標準である大企業で働いています。ブラウザは「背景サイズ」を認識しないため、目的の効果を得るためにチートする必要があります。

2つのdivをレイヤー化しようとしています。1つは画像がimgタグのdivに収まるサイズで、もう1つはスーパーインポーズするテキストが含まれています。独立して、両方のdivは正常に機能していますが、階層化はまったく行われていません。それらは次々に現れ続けます。

z-index値、絶対位置と相対位置の組み合わせ、フロートなどでテストしましたが、うまくいきませんでした。明らかな何かが欠けているに違いないように感じます、そしてもう一組の目が大いにありがたいです。

最新のCSSは以下のとおりです。

.case-background {
margin-left: 93px;
margin-right: 93px;
border: 1px solid #665546;
}
.case-background img {
height: 100%;
width: 100%;
position: relative;
z-index: 0;
}
.case-text {
margin: 12px;
padding-left: 35px;
padding-right: 35px;
border: 1px solid #665546;
font-family: Arial, Helvetica, sans-serif;
color: #665546;
border: 1px solid #665546;
font-weight: normal;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}

HTMLは次のとおりですが、ヘッダー情報とhtml、head、bodyタグなどは含まれていません。

<div class="case-background">
<img src="images/test.jpg" />
<div class="case-text">
<h2>testing header</h2>
<p>testing paragraph</p>
</div>
</div>
4

1 に答える 1

1

CSS3Pieは、古いバージョンのIEに多くのCSS3機能を追加するライブラリです。IE8に固執しているが、いくつかの最新のCSS機能をサポートする必要がある場合は本当に良いです。

CSS3Pieの最新バージョンには、background-sizeスタイルのサポートが含まれています。したがって、CSS3Pieを使用すると、標準のCSSを使用して背景サイズの効果を得ることができます。

同じことを行うことができるJavaScriptハックは他にもたくさんありますが、CSS3Pieは素晴らしい小さなツールです。毎回お勧めします。

于 2013-02-26T20:27:37.870 に答える