0

画像の下のテキストに問題があります。

何らかの理由で画像から離れすぎているため、常に画像の下から 30px 離しておいてください。ただし、ブラウザを小さくすると、テキストが押し下げられます。

このJSFiddleに CSS を配置しました。

親切な人が私の初心者のエラーを指摘してくれることを願っています.

ありがとう

マイケル

ブラウザの幅が縮小

アップデート：

次の問題を解決しました。

<script type="text/javascript">
        // The social div 
    var $socialDiv;
    
    $(document).ready(function() {
        $socialDiv = $('.social');
    });
    
    $(window).scroll(function() { 
        //Get scroll position of window 
        var windowScroll = $(this).scrollTop(); 
        
        $socialDiv.css({
            'opacity' : 1 - windowScroll / 400,
            'background-position-y' : -windowScroll / 10
        });
    });
</script>

次に、divにマージンの下部を追加しました。

<div class="social" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-repeat: no-repeat no-repeat; overlow: hidden">
</div>
4

3 に答える 3

1

注: OP は最終的に、このhttp://fearthegrizzly.com/効果を実現したいと説明しました。

ギャップが大きい理由は？

複数の理由 ( <br>.project_content div の上の余白のパディングに追加されたタグ) がありますが、そのうちの 1 つは、div の高さが同じままで、ブラウザーでサイズ変更された .social div の背景です。これにより、div の残りの部分である背景の下に巨大な空白が残ります。これは css-rule background-size: 100% auto(ソーシャル div の JavaScript で定義) が原因です。

CSS を少し書き直して、これを修正できないか見てみましょう。

何が起こるべきですか？

div の背景は同じ高さに保つ必要があります。ギャップの形成を避けるために、div も同じ高さ、つまり背景画像の高さ (320px) に保つことが賢明です。背景は、div の水平方向の中央だけでなく、上部にも配置する必要があります。次に、フェードオンスクロール機能が機能し続けるように修正する必要があります。

また、.social div の下に 30 ピクセルのスペースが必要だとも言及しました。これに必要なのはmargin-bottom: 30px. .project_content div の空白のルールと上部パディングは不要です。

実装

したがって、次の CSS を取得します。

div.social {
  width: 100%;
  height: 320px;
  margin-bottom: 30px;
  background: white url('image.jpg') repeat-x center top fixed;
  }

jsFiddleのフォークで、これを実際に見ることができます。.project_content の上部にあるスペースを削除できていないことに注意してください。

すべてが明確であることを願っています。フォローアップがあれば、躊躇しないでください。

于 2012-08-02T11:03:56.440 に答える
0

画像を含む HTML にスタイルがあります。

<div class="social" style="background-image: url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg); background-attachment: fixed; background-size: 100%; height: 560px; width: 100%; background-repeat: no-repeat no-repeat; "></div>

560pxにheight設定されているため、画像が実際にどれだけ大きく (または小さく) ても、画像は非常に多くの垂直方向のスペースを占有します。

画像をフォーマットするJavascriptは次のとおりです。

var $socialDiv,
        // The social div's height 
        socialDivHeight = 560,
        currentSocialDivHeight = socialDivHeight;
        var socalDivWidth = 100;
    $(document).ready(function() {
        $socialDiv = $('.social');
        $socialDiv.css({
            'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
            'background-repeat': 'no-repeat',
            'background-attachment': 'fixed',
            'background-size' : '100% auto',
            'height' : socialDivHeight + 'px',
            'width' : socalDivWidth + '%'
            });

値を変更するsocialDivHeightか、画像の高さを設定する背後にあるロジックを変更する必要がありますsocialDivHeight + 'px'

于 2012-08-02T09:32:52.993 に答える
0

div の高さが変更されない理由

ソーシャル div を記述する Javascript で、 を定義しますsocialDivHeight = 560。これにより、画像が配置されている div のサイズが固定されるため、ブラウザーの幅を小さくしても縮小されません。

問題のJavascriptはこれです（切り捨てられました）：

<script type="text/javascript">
  // The social div 
  var $socialDiv,
  // The social div's height 
  socialDivHeight = 560,
  currentSocialDivHeight = socialDivHeight;

  (..)

  // Then, later, you define a css rule from the set height of 560.
  'height' : socialDivHeight + 'px'
</script>

その高さを定義しない場合、div はブラウザーの幅に合わせて自動的にサイズ変更されます。

どうすればこれを解決できますか?

ここでの問題は、画像が #social div の背景として設定されていることです。div がコンテンツ用に決定したサイズで単純に切り取られます。高さを指定したため、少なくとも背景画像全体が表示されますが、これは div がブラウザーの幅に合わせてサイズ変更されないことも意味します。

<img>div 内にactual が必要です。

<div class="social">
   <img src="image.jpg">
</div>

div と画像の両方の幅が 100% (ブラウザーの全幅) であることを確認すると、画像はブラウザーでサイズ変更され、div の高さは画像の高さに適応するため、プッシュdiv down の下の他のコンテンツ。15 ピクセルの高さの 2 つのタグのmargin-bottom: 30px;代わりに、30 ピクセルの間隔が必要な場合は、div でa を使用することもできます。<br>

div.social {
  width: 100%;
  margin-bottom: 30px;
}

img {
  width: 100%;
}

HTMLとCSSでこれが何を意味するかをうまく説明する非常に単純化されたフィドルを作成しました：http://jsfiddle.net/kMnQ2/

于 2012-08-02T09:35:45.083 に答える