Question

当我为div元素设置图像背景时，它和我的导航栏之间有一个小空格。此外，如果有可能我试图尝试与背景图像的一点视差效果。我把你需要的部分代码搞砸了。如果你想要完整的代码，或者你认为我已经删除了一些重要的东西，请告诉我，我将链接到完整的代码。链接是www.aaronvigal.com，提前获得所有帮助。

    <!DOCTYPE html>
<html>
<head>
    <title>Aaron's Website</title>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <link rel=StyleSheet href="style.css" type="text/css">
</head>
<body>
<div class="paralax">
<center>
    <br />
    <div class="circular"></div>
    <p class="title">Aaron's Website</p>
    <p class="subtitle">I'm Aaron. Here's my <a class="subtitle" href="index.html">website</a>! Here are my <a class="subtitle" href="index.html">photo's</a>. </p>
</center></div>
    <div class="navigation">
        <center>
            <a class="navigation2" href="index.html">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a class="navigation" href="index.html">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a class="navigation2" href="index.html">|</a>
        </center>
    </div>
</body>
</html>






    body{
    margin: 0px;
}

p.title{
    text-rendering: optimizeLegibility;
    color: #333;
    font-family: "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-size: 30px;
    line-height: 0.5;
}

div.paralax{
    background: url(blur.jpg) no-repeat fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
}
p.subtitle{
    text-rendering: optimizeLegibility;
    color: dimgrey;
    font-family: "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-size: 15px;
    line-height: 0.5;
}
a.subtitle{
    color: darkred;
}

.circular {
    padding-top: 10px;
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(selllf.jpg) no-repeat;
    }

Answer 1

标题中的段落有默认边距，将css更改为：

p.subtitle {
    color: dimgrey;
    font-family: "Helvetica Neue",HelveticaNeue,Arial,sans-serif;
    font-size: 15px;
    line-height: 1em;
    margin: 0;
    padding: 0 0 20px;
    text-rendering: optimizelegibility;
}

Answer 2

我不确定您对视差效果的问题是什么，但是对于div和导航栏之间的空白区域，看起来您在网站名称下的简短描述会将其推下来。你有几个我能想到的选择。在css中为“导航”添加一个

margin-top：-15px;

或者您可以缩短描述的高度，使其不会将其推下来。

HTML DIV的完整背景

2 个答案: