- 締切済み
グラデーション背景色について
お世話になります。教えてください。 現在ホームページ作成中ですが、背景色に上部から下部へのグラデーションにしたいと思っています。画像編集ソフトで、上部（#0000FF)、下部(#FFFFFF)で作成し、いざページ作成をおこないました。ページの下部のCSS枠の背面色を#FFFFFFにして最下部は背景と境が分からない様になると思っていましたが、微妙に色合いが変わってきます。なぜなのでしょうか。 また、CSSにて背景グラデーションではIE以外では表示されないのでちょっと使えないです。 よろしくお願いいたします。
- nanda01
- お礼率21% (5/23)
- ホームページ作成ソフト
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- silver_kei
- ベストアンサー率0% (0/2)
こんにちは。 私も背景にグラデーションを使ったりするのですが、たとえばA色→白色にする場合、A色→白色（背景画像）、白（背景色）とするのではなく、A色→透明（背景画像）にして、白（背景色）に設定しています。 割と綺麗にグラデ-ションはかかります。 尚、その際の背景画像は細長い画像（5×500pxなど）で、上から下へのグラデーションなら左上に固定し、横方向に繰り返すようにCSSで設定します。 そうすると比較的軽い画像でグラデーションをかけることができます。 ご参考まで。
- SortaNerd_
- ベストアンサー率59% (309/522)
画像形式はjpgでしょうか? jpgは基本的に色は正しく出ません。特に広い範囲を1色で塗った場合相当高画質設定にしないと目に見えて色が違ってしまいます。 なお、グラデーション画像ならpngの方が無劣化かつ容量もたぶん少なくなるのでお勧めです。
関連するQ&A
- グラデーション背景にしたい
こんにちは。 ホームページ作成初心者の者なのですが、 ページの背景をグラデーション背景にするために スタイルシートで以下のようにしてみました。 しかしグラデーション背景になりません。 どこがおかしいのでしょうか？ －－－－－－－－－－ ・ ・ ・ <title></title> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') ; } --> </STYLE> </head> <body>
- ベストアンサー
- HTML
- グラデーション背景と画像固定背景
こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> （省略） </HEAD>
- ベストアンサー
- ホームページ作成ソフト
- CSSで背景にグラデーション
お世話になります。 CSSを用いて背景にグラデーションをかけようと苦心しています。 filter:alpha(opacity=100, finishopacity=0, style=1); で、グラデーションはかかるのですが、 そのタグ内の文字までグラデーションがかかってしまいます。 また、この方法ですと、Firefoxでは、グラデーションがかかりません。 Yahooのページ http://www.yahoo.co.jp/ では、背景画像を使わないでグラデーションをかけていると思うのですが、どのようにすればこのようなことができるのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- htmlかcssで背景の白い枠をなくす方法
お世話になっております。 個人でホームページ制作をしているのですが html、cssについての質問です。 現在制作中のホームページなのですが 背景をグリーンから白のグラデーションになるように設定したのですが白い枠ができてしまいました。 こちらを消す方法をどなたかご存知でしょうか？ 背景のグラデーションはcssで以下のように設定しました。 .html { filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#e8ffd7,endColorStr=#ffffff); } 現在制作中のホームページ http://www14.ocn.ne.jp/~testpage/
- ベストアンサー
- HTML
- 背景グラデーションが、firefox、GoogleChromeなどで表示されません
webページを作成しているのですが、 IEではきちんと表示される背景のグラデーションが、firefox、GoogleChromeなどでは表示がされません。 （白背景になります。その他の画像などの表示は正常です。） ソースはbody内で、下記を使用しております。 <div id="obj1" style="width:100%;height:100%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#46B0E5,endColorstr=#3A6EB6)"> 原因は何でしょうか？よろしくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- ビルダーで複数ページ作成し印刷時、背景の設定
ビルダーで複数ページ作成したものを印刷すると、1ページ目には背景が入らず、2ページ目以降に入ってしまいます。1ページ目上部、最終ページ下部に背景を表示させるにはどのようにすればいいのでしょうか？
- 締切済み
- CSS
- 背景画像を、flashを使わずウィンドウの可変に対して拡大縮小か、CSSなどでグラデーションを中央から外側にかける方法
作りたいと思っているサイトの背景設定に関していくつか質問です。 <作りたい背景画像について> 中央から四方外側に向かってグラデーションがかかっている背景画像 （添付画像参照） <サイトデザインに関して> ウィンドウいっぱいに背景画像を表示し、ユーザーの可変に対して背景画像が縮小拡大できる flashは使いたくない。 <わからなくて困っている事> (1) 背景画像をリサイズする方法として下記のサイト↓があり、 この方法で背景画像を設定してみました。 http://www.webbibo.com/stylesheet/image/bg_dimension.html しかし、IE6以上で見るとウィンドウの右側と下部に背景が足りておらず、 ウィンドウいっぱいに背景画像を見せる事ができません。 いろいろ調べてみたのですが、IE対策方法がわかりません。 IEではこのリサイズ方法で完全に背景画像をウィンドウいっぱいに表示させる事は不可能なんでしょうか？ 可能ならば、設定方法はどうすればようのでしょうか？ (2) (1)の解決案として、 IEの場合のみ背景画像のグラデーションを諦めて単色カラー表示し、 その他のブラウザで上記サイトの方法を使用して背景画像をみせると言う方法を考えています。 しかし、設定の仕方がわからず、途方に暮れています。 (3) (1)のリサイズ方法を使わなくても、添付した画像のような背景のグラデーションを背景として見せる事は可能でしょうか？ 可能ならば、どういう方法があるんでしょうか？ 背景のグラデーション表示方法に関してCSSなどでグラデーションを作る方法がありますが、上下や、左右方向などのグラデーション表示方法はありましたが、中央から四方外側の方向の設定方法がわかりませんでした。 自力で色々調べていたんですが力足らず、質問させていただきました。 宜しくお願いします。
- ベストアンサー
- HTML
- Opera等でもグラデーションを利用できるよに
お世話になります。 テーブルの背景にグラデーションを利用したいのです。 IEであればスタイルシートで filter: progid:DXImageTransform.Microsoft.gradient (startcolorstr=#FFFFD9, endcolorstr=#FFFF99, gradienttype=0); のように記述すればよいと思うのですが、Opera等ではそれができません。 なので、テーブルの背景にグラデーション画像を用意しようと思ったのですが、 グラデーションは縦に色が変わっていきたいのです。 横に変わっていくのであれば、横幅は固定なので その画像が繰り返し表示されれば問題ないと思うのですが。 縦のグラデーションでかつテーブルの高さは可変です。 画像よりテーブルが大きくなってしまった場合には、繰り返されてしまいます。 テーブル枠にあわせて、背景の画像の大きさも替えることはできないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- プルダウンリストの背景色の指定
お世話になります。 現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。 <select> <option style="background-color: #FF0000;">サンプル1</option> <option style="background-color: #00FF00;">サンプル2</option> <option style="background-color: #0000FF;">サンプル3</option> <option style="background-color: #FFFFFF;">サンプル4</option> </select> このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、 上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。 IEとおなじ動きになるようにするには、どうしたらよいでしょうか。 ちなみに、 <select style="background-color: #FF0000"> にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。 と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。 簡単に解決できる方法などございますでしょうか。 もしくは、javascriptで解決できますでしょうか。 どうぞ宜しくお願いいたします。
- ベストアンサー
- HTML
- CSSのみでPNG画像を透過グラデーションさせたい
画像編集ツールを用いて作ったアルファチャンネルPNGと同様な「透過具合のグラデーション」を、PNGなど写真の画像ファイル全般に対して、CSSのみで再現することは可能でしょうか？ CSS自体で作った背景を透過グラデーションさせる方法は見つけられましたが、画像ファイルに同様の効果を付与する方法を見つけられないでいます。 ご助言を頂けると幸いです。
- ベストアンサー
- CSS
