origin - transforms css




バックグラウンドでのCSS画像の伸縮とスケーリング-CSSのみで (12)

ブラウザのビューポートのサイズに応じて背景画像の伸びと縮尺を変えたいと思っています。

Stack Overflowで、 ストレッチやCSSの背景の拡大などの作業を行ういくつかの質問があります。 それはうまくいきますが、 imgタグではなく、 backgroundを使ってイメージを配置したいと思います。

その中にimgタグが置かれ、次にCSSがimgタグに捧げられます。

width:100%; height:100%;

それは動作しますが、その質問は少し古く、CSS 3では背景画像のサイズを変更するとかなりうまくいくと書かれています。 私はこの例題を最初のものにしようとしましたが、うまくいかなかったのです。

background-image宣言には良い方法がありますか?


100%幅と高さの絶対divのイメージに同意します。 CSSのボディの幅と高さを100%に設定し、マージンとパディングをゼロに設定してください。 この方法で見つかるもう1つの問題は、テキストを選択するときに、選択領域が背景イメージを包含することがあり、全ページを選択状態にするという不幸な効果があることです。 あなたはuser-select:none CSSルールを使用することでこれを得ることができます。

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

ここでもInternet Explorerはユーザー選択オプションを認識しないため、ここでは悪い人ですInternet Explorer 10プレビューでもサポートされていないため、JavaScriptを使用して背景イメージを選択できないようにすることができます( http://www.felgall.com/jstip35.htm )、またはCSS 3背景ストレッチ法を使用してください。

また、 SEO場合は、ページの下部に背景イメージを配置しますが、背景イメージの読み込みに時間がかかりすぎると(つまり、最初は白地になっています)、ページの上部に移動できます。


1枚の画像でこれを達成したいですか? 実際には、2枚の画像を使って伸びる背景に幾分似ています。 例えばPNG画像。

私はこれまでにこれをしてきました。それほど難しいことではありません。 しかも、ストレッチは単にバックグラウンドの品質に悪影響を及ぼすと思います。 また、巨大な画像を追加すると、遅いコンピュータやブラウザの速度が低下します。


CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

css-tricks https://css-tricks.com/perfect-full-page-background-image/説明されていhttps://css-tricks.com/perfect-full-page-background-image/

デモ: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php : https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

コード:

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

border-image : yourimageプロパティを使用するborder-image : yourimageまで拡大border-image : yourimageすることができます。背景画像を指定しても、その上に境界線画像が描画されます。

あなたのスタイルシートがCSS3をサポートしていないどこかに実装されている場合、border-imageプロパティは非常に便利です。 firefoxのchromeを使用している場合は、 background-size:coverプロパティ自体をお勧めします。


次のCSS部分は、すべてのブラウザで画像を伸ばす必要があります。

私は各ページに対してこれを動的に行います。 したがって、私はPHPを使用してページごとに独自のHTMLタグを生成します。 すべての画像は「画像」フォルダにあり、「Bg.jpg」で終わります。

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

すべてのページの背景画像が1つしかない場合は、 $pic変数を削除し、エスケープするバックスラッシュを削除し、パスを調整してCSSファイルに配置することができます。

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

これは、Internet Explorer 9、Chrome 21、およびFirefox 14でテストされました。


ありがとう!

しかし、誰かが私に不足していることを教えてくれるまでは、 Google ChromeSafariブラウザでは機能しませんでした(ストレッチは機能しましたが、写真の高さはわずか2mmでした)

height:auto;min-height:100%;を設定してみてくださいheight:auto;min-height:100%;

だからあなたのheight:100%;ためにそれを変更してくださいheight:100%; ライン、与える:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

その新しく追加されたコードの直前に私はこれを私のDrupal Tenduテーマのstyle.css Tendustyle.css

html、body {height:100%;}

#page {background:#ffffff; 高さ:自動!重要;高さ:100%;最小高さ:100%;位置:相対;}

それから、 class=stretchを追加しながら、Drupal内に新しいブロックを作成する必要がありclass=stretch

<img alt = "" class = "stretch" src = "pic.url" />

そのDrupalブロックでエディタで画像をコピーするだけでは機能しません。 エディタを書式なしのテキストに変更する必要があります。


このCSSを使用する:

background: url('img.png') no-repeat; 
background-size: 100%;

コンテナサイズに基づいて画像を適切に拡大するには、次のようにします。

{
background-size:contain;
background-repeat: no-repeat;
}

実際にはimgタグを使って背景画像と同じ効果を得ることができます。 Zインデックスを他のものよりも低く設定するだけで、position:absoluteを設定し、フォアグラウンドのすべてのボックスに透明な背景を使用する必要があります。


私は、ページ全体に伸ばすことなく、背景画像を中央に配置し、拡大縮小したいと思っていました。アスペクト比を維持したいと思っていました。 これは他の答えに示唆されたバリエーションのおかげで私にとってはうまくいった:

インラインイメージ:------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

私はこれを使用し、すべてのブラウザで動作します:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>




background