0

图片下方的文字有问题。

出于某种原因，它离图片太远了，我希望它始终与图片底部保持 30px 的距离。但是，当我缩小浏览器时，它只会将文本向下推。

我已经将我的 CSS 放在了这个JSFiddle 中。

希望你们中的一个人可以指出我的noobiness错误。

谢谢

迈克尔

浏览器宽度缩小

更新：

解决了以下问题：

<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 上方的边距上添加了标签），但其中之一是 .social div 中的背景随浏览器调整大小，而 div 的高度保持不变。这会在背景下方留下一个巨大的空白，即 div 的其余部分。这是由 css 规则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

为什么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 中有一个实际的。

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

确保 div 和图片的宽度都是 100%（浏览器的全宽），图片会随着浏览器调整大小，并且 div 的高度会适应图片的高度，因此，push div下面的其他内容向下。margin-bottom: 30px;如果您希望发生 30 像素的间距，而不是两个<br>15 像素高度的标签，您也可以在 div 上使用。

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

img {
  width: 100%;
}

我创建了一个非常简化的小提琴，希望能解释所有这些在 HTML 和 CSS 中的含义：http: //jsfiddle.net/kMnQ2/

于 2012-08-02T09:35:45.083 回答
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>

它已height设置为 560 像素，因此无论图像实际上有多大（或小），您的图像都会占用如此多的垂直空间。

这是格式化图片的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 回答