IE9にも対応したグラデーションと画像を併用した背景設定ができた(^O^)
は～～苦労した・・・
って言っても、今までバージョン毎での違いがでないように、画像で、グラデーション付きの背景を作っていたのですが、今回諸々の事情で、CSS3で、グラデーションと画像併用の背景を作る事に・・・・・・
FireFoxとかは、ちょっとは苦労しましたが、とにかくIE対応ですね・・・・・皆がIEが嫌いになる理由がよ～くわかりました。
まず、Ultimate CSS Gradient Generator にアクセスして好きな感じのグラデーションを作成します
コピーしたのが、これ！
|
background: #fcfff4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter’ to 'none’ */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH
htbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0i
MTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgP
GxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXR
zPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICA
gPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8
+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWU5Y2UiIHN0b3Atb3BhY
2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE
iIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fcfff4′, endColorstr=’#e9e9ce’,GradientType=0 ); /* IE6-8 */
|
わりずらいかもしれませんが、backgroundの後ろにコメントが書いてあるので、そのコメントが対応しブラウザやバージョンです。ちなみにこのまま貼ってもIE9では動作しません。上記のIE9supportのチェックを入れた際の注意事項の事をしなければなりませんが、CSSに入れ込む為にここを参照しました。
ここに書いてある事で、今作っているサイトでは、headerの部分に
|
<!–[if lt IE 9]> <html lang="ja"> <![endif]–> |
を追記します。
それから、上記の物を外套のタグ(例えばH3)に貼り付け、最後の行にfilter:none;１を追記します。
これで、グラデーションはかかります。
さらにそこで、画像を使用したい場合には、これに追記します。結論を先に書きますが、このように記述します。
|
background: #e3f5ab; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter’ to 'none’ */
background: url(../img/h3_.png) no-repeat 0 0,url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d
3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld
0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbm
VhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaX
RzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMC
UiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iI2UzZjVhYiIgc3RvcC
1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjklIiBzdG9wLWNvbG9yPSIjZ
mJmZmYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDgl
IiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgID
xzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjZmJmZmYyIiBzdG9wLW9wY
WNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I3
ZGYyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8
cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwo
I2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: url(../img/h3_) no-repeat 0 0,-moz-linear-gradient(top, #e3f5ab 4%, #fbfff2 9%, #ffffff 48%, #fbfff2 87%, #b7df2d 100%); /* FF3.6+ */
background: url(../img/h3_.png) no-repeat 0 0,-webkit-gradient(linear, left top, left bottom, color-stop(4%,#e3f5ab), color-stop(9%,#fbfff2), color-stop(48%,#ffffff), color-stop(87%,#fbfff2), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: url(../img/h3_.png) no-repeat 0 0,-webkit-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: url(../img/h3_.png) no-repeat 0 0,-o-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* Opera 11.10+ */
background: url(../img/h3_.png) no-repeat 0 0,-ms-linear-gradient(top, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* IE10+ */
background: url(../img/h3_.png) no-repeat 0 0,linear-gradient(to bottom, #e3f5ab 4%,#fbfff2 9%,#ffffff 48%,#fbfff2 87%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e3f5ab’, endColorstr=’#b7df2d’,GradientType=0 ); /* IE6-8 */
filter:none;
|
上記は、ここを参照しています。１つの要素にグラデーションと背景画像を両立させる方法
ここにも書いてありますが、CSS3は。背景画像を2枚重ねる事ができますので、こんな書き方をします。注意点は、順番を間違えてないでください、先に画像の指定をしてからグラデーションの指定です。
それと、IE9のグラデーションのSVGの事はここを参照にしました。IE9でグラデーションを実現する方法
あ～苦労した・・・・って言っても、ググって色々やっただけなので、上記のサイトの作成者様には大変感謝しています。