http://beta.es3inc.comにサイトがあり、下部にグラデーションが表示されますが、ユーザーがブラウザを縮小すると左にスライドすることがわかりますこれはあまりにも遠くに入っていない限り、問題ありません。それはあまりにも縮小したときに、上のdivの最小幅と同じにする必要がありますが、左に押し続けるでしょう。どのように私はこれを行うことができるだろう上の任意のアイデア?ブラウザが収縮しすぎるとボトムグラディエントが発生する
答えて
私は私がやっているものを達成するための最良の方法だと思いますJavaScriptを使用して、このJQueryを作成しました。そのようなものがあれば誰でも可能です。
/*Script is designed to keep a gradient from being cropped by the browser
this script requires JQuery, tested on version 1.6 free with no waranty GPL licence.
SETUP-Place what you need here:...*/
var whenreaches = 1100; //When resize reaches this point do it to provide a smooth transition
var minwidth = 500; //This will be the min width in px, if it reachs this the Javascript will switch the CSS
//Resize event will trigger this JS...
$(window).resize(function(){
var current_width = $(window).width();
var current_bg = $('body').css('background-position');
if(current_width <= whenreaches){
//We need to change it to scroll, so the effect is not lost
$('body').css('background-attachment','scroll');
$('body').css('background-position',minwidth+"px 0%");
}
//Make sure it can return too
if(current_width >= whenreaches){
$('body').css('background-attachment','fixed');
$('body').css('background-position',"100% 100%");
}
});
あなたの背景画像とHTML文書の範囲と幅の値を調整する必要があります
これはIE8と9で動作しますか? –
CSS3との互換性が非常に不安定で、このコードは "background-color:#1a82f7; background-image:url(images/linear_bg_1.png); background-repeat:repeat-y;というコードでは、フォールバックのために、それは既に使用している基本的なものであり、これはあまりにも縮まりすぎて、リンクの下を白くします。 –
IEの関連情報を –
- 1. ユーザーがブラウザをズームすると、Flashズームが発生する
- 2. ブラウザでメモリリークが発生する
- 3. ブラウザでSquishItをバンドルしたときにエラーが発生する
- 4. メッセージが大きすぎるとAppEngineタスクキューの例外が発生する
- 5. C#でメモリリークが発生すると画像が圧縮される
- 6. カスタムWebブラウザが遅すぎる
- 7. グランツとのブラウザ同期でERR_CONNECTION_REFUSEDエラーが発生する
- 8. 移動が発生するとイベントが発生する
- 9. e.Cancelが発生しますが、クリックイベントが発生すると他のコードも発生します
- 10. Eclipse ADT Plugin:インストールするアイテムを収集中にエラーが発生しました
- 11. キーボードのポップアップ時にAndroid Web Viewの縮小が発生する
- 12. TFS 2010 - コピー中にエラーが発生しました:パスが長すぎます
- 13. ブラウザがポストバックデータとして収集する値はどれですか?
- 14. ValueError:アンパックする値が多すぎる、テキストファイルを読み込むときにエラーが発生する
- 15. onCompleteの発射が遅すぎる
- 16. Googleマップのapiでクリックイベントが発生するとエラーが発生しますか?
- 17. ブラウザでPDFを表示すると、ほとんどのブラウザで複数のHTTPリクエストが発生する
- 18. UIPopoverControllerが大きすぎるとUIPickerViewが小さすぎる
- 19. ProgressDialogが遅すぎると表示が遅すぎる
- 20. jqueryモバイルタップイベントが1回発生して問題が発生する
- 21. 1日おきに "多すぎるフェッチ失敗"が発生する
- 22. Webブラウザが速すぎる、速度を制御する方法?
- 23. Purescriptパルプビルド出力で、ブラウザでrequirejsエラーが発生する
- 24. ノキア5800ブラウザでdivオーバーフローが発生する
- 25. BlackBerry Torch 9800 WebkitブラウザでJavascriptイベントが発生する
- 26. onItemDisclosureイベントを発生させるとitemtapイベントが発生する
- 27. C#Invoke()が発生すると、引数例外が発生する
- 28. ブラウザのタブを変更すると、特にGoogle Chromeのフォーカスイベントが発生することがあります。
- 29. WPFでビットマップを拡大/縮小しようとすると、TransformedBitmap.EndInitでOverflowExceptionが発生しますか?
- 30. 圧縮解除でエラーが発生しましたか?
で更新しました。この方法では、背景イメージを切り抜かずにスケールしません。 –
より良い解決策は、CSSのmin-width属性を使用することです。 –