- ベストアンサー
CSSで背景にグラデーションをかけたいけどできません。
filter: progid:DXImageTransform.Microsoft.Gradient (StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) これをcssファイルのbodyのところに下記のように 付け加えたのですが反映されません。 BODY{ font-style:normal font-weight:normal font-size:small text-align:center;/ color:#000000 filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) } 元は背景色と背景画像が指定してあった部分 background-color:#ffffff;/ background-image:url(./img/back.gif);/ を消してそこに入れたのですがそれは問題ないですよね? 教えてください、お願いします。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
各行の最後にセミコロンを入れましょう。 BODY{ font-style:normal; font-weight:normal; font-size:100px; text-align:center; color:#000000; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0); }
その他の回答 (2)
- cyokodog
- ベストアンサー率56% (13/23)
以下のような記述でIE以外のブラウザでも画像を使わずグラデーションをかける事が可能です。 <html> <head> <style type="text/css"> div.example_gradient01{ width:100px; height:100px; margin:1em 16px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#5588ff,EndColorStr=#ffffff); background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAP0lEQVQYlWMI7fj/n4mRkYGBiQlOIHGZULkIJUwk6ECTRRfDYh6SEiJ1oDsSpzNIdzhei0gKCCJ0YLWDukEHAGMABL+MSJMfAAAAAElFTkSuQmCC"); } </style> </head> <body> <div class="example_gradient01">no image</div> </body> </html> サンプルページ http://cyokodog.web.fc2.com/cyokolab/example/gradient.ex.0101.html CSSの定義を見ると background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUh... の部分をどう書けばいいか分からないと思いますが、この部分を自動生成してくれるオンラインツールを公開してます。 詳しくは私の書いているこちらのブログをご覧下さい。 画像なしでグラデーションを可能にするCSS生成ツール公開しました - Cyokodog::Daiary http://d.hatena.ne.jp/cyokodog/20080623/1214192211 画像を使わないグラデーションCSSをIE用に微調整してみる - Cyokodog::Daiary http://d.hatena.ne.jp/cyokodog/20080625/1214412746 Gradient CSS Generator http://cyokodog.web.fc2.com/cyokolab/html/gradient_css_generator.html
お礼
すごいですね! 勉強させていただきます。 ありがとうございました。
フィルタは IE専用のスタイル設定なので 他のブラウザには全く反映さ れません。ご存知とは思いますが ご注意下さい。
お礼
そうですね。ありがとうございます!
お礼
できました!!! よかった~~ほんとにありがとうございます!!