0

我制作了一个网站，它有一个带有左右箭头的 jquery 滑块，可以移动到下一张幻灯片（网页）。所有内容都包含在一个网页中并使用哈希。 http://www.ilandeistudio.com

它需要为每个页面（散列）设置不同的全屏背景，所以我使用了一种 CSS 技术，将全屏背景放在我在这里找到的 DIV 中（CSS 技术 1） http://css-tricks.com/perfect-full-页面背景图像/

这可行，但图像的高度超出了屏幕的底部，因此添加了垂直滚动条，您无法看到整个背景图像。我不介意稍微扭曲背景（它们都是 w1024px x h682px）我只希望整个图像在可视区域中。

我无法让它与 CSS 一起使用，如果有人有建议，请告诉我，否则也许有人可以推荐一个 jquery 解决方案；但我不知道如何使大多数这些 jquery 示例在多个哈希的 DIV 中工作。

这是我现在使用的 CSS：

        img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: absolute;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }

以下是其中两张幻灯片的示例

               <div id="home" class="slide">
                <img src="images/bg_home1.jpg" class="bg">
          <div class="outer-wrapper">
                  <div class="inner-wrapper">
                        <div class="header">
                            <a href="#home" class="special-anchor"></a>

                            <div class="nav">
                                <a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
                                <span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
                            </div>
                        </div>
                        <div class="content">
                                test content
                        </div>
                        <!--Content ends-->
                    </div>
                </div>
          </div>

          <div id="about" class="slide">
                <img src="images/bg_about1.jpg" class="bg">
                <div class="outer-wrapper">
                  <div class="inner-wrapper">
                        <!--Header starts-->
                        <div class="header">
                            <a href="#about" class="special-anchor"></a>
                            <!--Navigation starts-->
                            <div class="nav">
                                <a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
                                <span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
                            </div>
                            <!--Navigation ends-->
                        </div>
                        <!--Content starts-->
                        <div class="content">
                        test content 02
                        </div>
                        <!--Content ends-->
                    </div>
                </div>
          </div>
4

1 回答 1

1

代码本身看起来是正确的。您没有包括但我会确保的一件事是您列出的标题和导航绝对定位在页面上，而不是向左浮动并使用边距来定位内容。这将为页面的 100% 添加空间。

所以图像本身正在扩展到页面的高度，并且在此之上添加了标题和导航的高度。如果您似乎在滚动这些对象的高度，这很可能就是问题所在。

于 2013-01-06T02:00:37.660 回答