Question

我首先要说的是我的css技能非常弱。

这是该网站，我试图在此背景中添加一些边距，以便我可以看到所有内容。我现在明白我无法在背景上使用边距，所以我的选择是什么？

这是我的HTML

<body>
    <div id="container">
        <nav id="navigation">
            <ul>
                <li><a href="index.html" id="btn">Homepage</a></li>
            </ul>
        </nav>
    </div>          
</body>

这是我的css

body { 
    background: url('images/prices.jpg'); 
    min-height: 100%;
    height: 100%;
}

#btn {
    color: #FAF3BC;
    background: #4FB69F url('images/texture.png') no-repeat right bottom;
    padding: 15px 30px;
    margin: 150px 0px;
    border-top: 5px;
    border-radius: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

我也遇到了主页按钮的问题，我想在那里也有一些空间，但是我尝试了一些像填充和边距这样的东西而且无法做到......

我将不胜感激任何帮助....如果你想要达到顶峰http://brewstahs.com/menu.html

，这里就是现场直播

Answer 1

也许你应该尝试使用background-position属性：

http://www.w3.org/wiki/CSS/Properties/background-position

Answer 2

你想做什么？如果要移动按钮，请尝试 margin-top：50px;例如在btn的css中。这样，按钮移动到底部50像素。保证金左侧将按钮向右移动，......

Answer 3

我知道为什么你的CSS没有用。 CSS最基本的用途是创建一个布局，但即使你的DOM包含代表容器和页脚的div，每个占用的高度也是等于其内容的高度（因为你没有为div容器提供任何高度）。简而言之，

保证金：150px 0px不起作用，因为父容器（nav）没有该高度来为其提供保证金。因此，为nav和div提供高度，它将起作用。

使用Firebug等工具查看您的布局，看看哪里出错了。一切顺利!!

Answer 4

如果您试图向下移动按钮，则需要先将其放入包装器

如果不试试这个。

body { 
    background: url('images/prices.jpg'); 
    min-height: 100%;
    height: 100%;
}

#navigation {
   position:relative;
   display:block;
   margin:40px 0px 0px 0px;
   padding:0px;
   width:auto;
   height:auto;   
}

#navigation ul {
   display:block;
   position:relative;
   margin:auto;
   padding:0px;
}

#navigation ul li {
  list-style:none;
}

#btn {
    color: #FAF3BC;
    background: #4FB69F url('images/texture.png') no-repeat right bottom;
    padding: 15px 30px;
    margin: 150px 0px;
    border-top: 5px;
    border-radius: 25px;
    text-decoration: none;
    text-transform: uppercase;
}

关于你的背景，你可以尝试一件事。使用background-repeat进行循环背景纹理，类似于你现在拥有的纹理：repeat;然后使用z-index将主背景图像放在其上方，并在需要时居中。只是给你一个简单的例子

body {
  background-image:url('images/loop.jpg);
  background-repeat:repeat;
  }

#backgroundimg {
   background-image:url('images/prices.jpg);
   background-repeat:no-repeat;
   display:block;
   position:relative;
   width:980px;
   height:700px;
   margin:auto;
   padding:0px;
}

希望这有助于：）

设置CSS背景边距

4 个答案: