1

ボディの背景を変更できるjqueryスクリプトがあります

本体の背景画像をブラウザー ウィンドウのサイズに合わせてスケーリングしたいhttp://www.buildinternet.com/project/supersized/というスクリプトがありますが、そのスクリプトのスケーリングを利用できないため、 background-img ではなくクラス img に影響します

何か案は

<script type="text/javascript">
$(document).ready(function() { 
$("#BGSelector a").click(function() {
   var imgLink = $("img", this).attr("src");
   $.cookie("html_img", "" + imgLink + "", { path: '', expires: 7 });
   var imgCookieLink = $.cookie("html_img");       
   $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 

}); 
});
</script>

<script type="text/javascript">
$(document).ready(function() {   
       var imgCookieLink = $.cookie("html_img");  
       $("body").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837");

 });

</script>
4

4 に答える 4

1

CSS3 の高度な背景プロパティがブラウザーの世界でさらに活用されるようになるまで、このクロスブラウザーを実行することはできません。最も近い方法は、アリがすでに指定したものです。

関心があるのが IE だけの場合は、独自の AlphaImageLoader CSS フィルターを試すことができます。

#myDiv { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); }

ただし、背景にフィルターがロードされた状態でリンクをクリックしようとすると、これは大混乱を招くことに注意してください。何らかの回避策を実装するまで、リンクをクリックすることはできません (いくつか回避策があります)。

于 2009-07-06T12:41:12.310 に答える
0

関心の分離のイデオロギーにわずかに反する、あなたが降りることができる別のルートがありますが、それは実行可能です。

サイトが.netで記述されている場合、プロジェクトにインポートできる画像コンポーネントアセンブリなどのアセンブリが存在し、これらのアセンブリが他のプラットフォームに存在する必要があることはほぼ確実です（ただし、個人的な経験はありません）。バックエンドに使用します。

したがって、これらを使用して、クライアントの画面サイズに従って画像を再構成し、バックエンドコードまたはjsを使用して、この画像を要素の背景画像として設定できます。しかし、ジェイソンがこの簡単な方法を実行すると述べたように、マイクロソフトの人々が新しいcss3ルールを採用する際の商用利用を見つけるのを待つ必要があり、その後、市場の他の部分も従うことができます。

于 2009-07-06T17:43:17.880 に答える
0

キャンバスの使用について考えたことはありますか? わかりました、キャンバスの使用についてほとんど何も知らないことを認めなければなりません (私はそれを学び始めたばかりです)。以下の例はおそらく完全に間違っていますが、動作します (IE ではなく FF と Chrome で)。ブラウザでサイズを変更することもできます。

<canvas id="myCanvas" style="width:100%;height:100%;position:absolute;left:0px;top:0px;;z-index:-1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='bg.jpg';
img.onload = function () {
 context.drawImage(this,0,0,300,150);
};
</script>

この例では、drawImage のサイズは 300x150 である必要があることに注意してください。これがデフォルトのキャンバス サイズです。

于 2009-08-16T00:36:56.720 に答える
0

私があなたなら、img を DOM に追加します。次に、絶対に配置されるように設定し、クライアントの幅に応じて幅を設定します。他のすべての z-index が高く、img が最低であることを確認してください。

于 2009-07-05T21:33:30.080 に答える