0

<div>私のページには以下のようなスタイルがあります。

.maintab1{
background:rgb(0,65,135);
background:-moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,65,135,1)), color-stop(29%,rgba(30,127,201,1)), color-stop(62%,rgba(53,154,255,1)));
background:-webkit-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-o-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-ms-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004187', endColorstr='#359aff',GradientType=1 );
}

image.pngCSS3グラデーションと一緒に背景画像として画像を含めたいです。

このstackoverflowの質問とこの記事を確認したところ、次のコードが表示されました。

background-image:url(image.png), -moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);

他のすべての属性にを適用し、正常に機能しています。

しかし、これはIE8（IE8とFF3 +でのみテストされています）では機能せず、古いものでは機能しないと考えています。グラデーションは完璧に機能していますが、画像は表示されません。

すでに述べた方法以外に、CSS3グラデーションとともに背景画像を表示する方法を教えてもらえますか？

4

3 に答える 3

1

を使用して解決できbackground-image:ます。ただし、これはすべてのブラウザで機能するわけではありません。より良い方法は、またはいくつかのセレクターに画像をネストし<div>、親セレクターにグラデーションスタイルを与えることです。これは本当にうまくいきます!!

于 2012-08-01T11:39:47.640 に答える
0

私は、IE7 +で動作する限り、簡単にいじくりまわしました（私のIE8は、filterオプションのために正しいグラデーションを示しました。IE7の画像にフォールバックします。

http://jsfiddle.net/MarkusK/HWLG9/

あなたが経験している問題が何であるかわかりませんが、それは開始が原因である可能性があります：

background:rgb(0,65,135);

しかし、私が覚えている限り、それは背景画像を覆い隠してはいけませんが、あなたは画像を指していないかもしれませんか？

フィドルからフィルターを削除しようとしましたが、IE8では画像が正常に表示されます。

編集：申し訳ありませんがあなたの質問を正しく読んでいませんでした。画像全体にグラデーションが「塗りつぶされる」ことはありません。透明度のあるrgbaを使用することもできますが、フィルターの動作が原因でIE8では機能しません。

于 2012-05-03T10:50:28.743 に答える
-1

htmlブラウザ固有のスタイルを設定できるように、私は常にクラスをに追加します。

グラデーションとimgの両方を使用してIE用の追加ファイルをターゲット.ie8または作成するよりも。.ie

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" dir="ltr" class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" dir="ltr" class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" dir="ltr" class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" dir="ltr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="non-ie" lang="en" dir="ltr"> <!--<![endif]-->
于 2012-05-03T09:58:51.120 に答える