10

ページの背景画像を拡大または縮小したいと考えています。私は複数のことを試しましたが、思い通りに機能するものは何もないようです。:( 私のページの URL はhttp://quaaoutlodge.com/drupal-7.14/で、リンクごとに異なる背景画像があります。画像のサイズと品質を最適化する必要があることはわかっていますが、最初にその技術的な部分を理解してください。

どうもありがとうございました！ロン

4

4 に答える 4

14

すべてのページで同じ背景画像

サイズに関係なく、ウィンドウスペース全体のサイズを変更して塗りつぶす背景画像が必要な場合は、このCSSを使用します。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

ページごとに異なる背景画像

ページごとに異なる背景画像が必要な場合は、

HTML

<div id="bg">
    <img src="<?=$imgsrc;?>" alt="">
</div>

CSS

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

出典：CSS-トリック

于 2012-07-08T21:37:48.607 に答える
2

これを実現する別の方法は、MDN にあります。

.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

IE フォールバック: 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

https://developer.mozilla.org/en-US/docs/Web/CSS/background-sizeから

于 2013-11-13T14:25:03.457 に答える
1

html background-image がうまく使われているのを見てうれしいです。一部の開発者は下位互換性を維持するためにトレーリング エッジ CSS に依存しているため、css3互換性のないブラウザーには多くの癖があります。古いバージョンの Safari (<4.05)と同様background:coverに、動作しません。この場合css3、示されているように、古いベンダーのフォールバックを使用できます。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-backgound-size:100% 100%; /* early css3 implementation */
    -webkit-background-size:cover;
}

そして、たまたま、純粋な css でページごとに異なる背景画像が必要な場合は、

html#bg1 {backrgound-image:url(images/bg1.jpg);}
html#bg2 {background-image:url(images/bg2.jpg);}

ただし、<html>タグに を付けられない場合、idまたはclassいくつかの に頼る必要がある場合がありますjavascript。その後、要素のページごとに異なる背景画像を使用できます<html>。これはまさに必要なものです。htmlこれはタグでうまくいくようです。一部のブラウザは、on で使用するとcssfor を無視します。タグは気まぐれではありません。これは、php ベースの方法よりも優れた修正方法である可能性があります。例えば：background-imagehtmlbody

<script>
    document.getElementsByTagName('html')[0].style.backgroundImage='url(images/bg3.jpg)';
</script>

background-size の html css は引き続き適用され、さまざまなブラウザー バージョンで正しくカバーされます。ただし、古い Safarijavascriptでは空の URL を使用するとエラーがスローされることに注意してください。たとえば、背景画像をクリアする場合などです。

<script> /*Causes Error Safari 4*/
    document.getElementsByTagName('html')[0].style.backgroundImage='url()';
</script>

エラーは通常javascript、原因の手がかりなしで実行を停止します。代わりに使用する必要がありますstyle.backgroundImage='none';

于 2014-10-17T23:14:59.827 に答える
0

CSSでメディアクエリを使用して、さまざまな画面サイズの背景画像を指定します。

@media all and (max-width: 699px) and (min-width: 520px) {
background-image:url('rightsizebackground.jpg');
}
于 2012-07-08T21:37:31.677 に答える