2

我在将<p>标签的背景图片置于网页中心时遇到问题。

脚本

$(function() {
    $('ul.nav a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000, "easeInOutExpo");
        event.preventDefault();
    });
    // $("#logo") = my <p> tag containg the background image
    var imgTop = ($(window).height() - $("#logo").css("height")) / 2;
    var imgLeft = ($(window).width() - $("#logo").css("width")) / 2;

    $("#logo").css({
        "top": imgTop,
        "left": imgLeft
    });

    setInterval(function() {
        $("#logo").fadeTo(2000, 0.7).fadeTo(2000, 1);
    }, 0);
});

CSS

*{
    margin:0;
    padding:0;
}

body{
    background: #100061;
    font-family:Georgia;
    /*font-size: 34px;*/
    letter-spacing:-1px;
    width:16000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    overflow: hidden;
    height: 100%;
}

.section{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
}
.section h2{
    margin:50px 0px 30px 50px;
}

.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}

.section ul{
    list-style:none;
    margin:20px 0px 0px 300px;
}

#logo{
    width: 500px;
    height: 194px;
    position: absolute;
    top: 0;
    left: 0;
}

HTML

<div class="section black" id="home">
    <img src="images/logo.png" id="logo" />
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<div class="section white" id="aboutUs">
    <h2>About Us</h2>
    <p>
        ‘A fathomless and boundless deep,
        There we wander, there we weep;
        On the hungry craving wind
        My Spectre follows thee behind.
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>        
    </ul>
</div>
<div class="section black" id="contactUs">
    <h2>Contact Us</h2>
    <p>
        ‘He scents thy footsteps in the snow
        Wheresoever thou dost go,
        Thro’ the wintry hail and rain.
        When wilt thou return again?
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<div class="section white" id="products">
    <h2>Products</h2>
    <p>
        ‘He scents thy footsteps in the snow
        Wheresoever thou dost go,
        Thro’ the wintry hail and rain.
        When wilt thou return again?        
    </p>
    <ul class="nav">
        <li>
            <a href="#home">Home</a>&nbsp;&nbsp
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.min.js"></script>        
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>

小提琴

4

1 回答 1

0

如果段落中有图像元素，则需要以不影响段落内容的方式定位图像： p img{ position: absolute; 最高：50%；左：50%；边距：-75px 0 0 -75px；向左飘浮; }

为了绝对定位图像，容器必须使用position: relative. 这是一个例子： p{ height: 180px; 宽度：40%；位置：相对；边框：1px 纯红色；}

最后，标记：

<p> 
    <img src="http://placekitten.com/150/150" alt="nice kitten" />
</p>

但是，更好的方法是使用 css: 显示图像background: url(http://placekitten.com/150/150) no-repeat center center;。因此标记会简单得多：

<div id="logo"></div>

div 的 CSS：#logo{ background: url(http://placekitten.com/150/150) no-repeat center center; 高度：180px；宽度：40%；边框：1px 纯蓝色；}

...或在http://jsfiddle.net/Er2Tw/

于 2012-09-26T06:23:34.760 回答