如何将图片对齐到右下角？

Question

如何将图片放置在页面右下角。

<div id="background-img" class="background-img" ></div>

.background-img{
    background:url('images/bg-img.png');
    width:100%;
    height:698px; 
    repeat-x;
}

我使用了 1px 图像来创建背景图。现在我需要在页面右下角放置公司标志，如何实现...

请给出建议并告诉我如何编写代码。先行致谢...

- PAM

Answer 1

你可以使用绝对定位：

position: absolute;
right: 0px;
bottom: 0px;

- Lumiukko

---

谢谢您的建议，它几乎实现了我想要的效果，但是标志图像并没有准确地适合在页面右下角。它放置在右上角的上面200像素。当页面高度增加时，标志图像没有向下移动，仍保持原样。我的代码如下：div class="background-img" img src="cmpy-logo" .background-img{ background:url('images/bg-img.png'); width:100%; height:698px; repeat-x; } cmpy-logo{ position: absolute; bottom: 0px; right: 0px; } - PAM

Answer 2

你可以使用 position: fixed; bottom: 0px; right: 0px;，这将确保你的公司标志始终可见于右下角 - 这意味着页面滚动不会影响它的位置。

或者，你可以使用position: absolute; bottom: 0px; right: 0px;，这将确保你的公司标志放置在特定位置，并且会受到页面滚动的影响。

我创建了一个演示这些差异的 fiddle，JsFiddle example。

- Mauno Vähä

---

谢谢您的建议，它已经接近完美了，但是标志图像并没有完全适合页面右下角。它被放置在右上角的200px处。当页面高度增加时，标志图像不会下移。它保持相同的状态。我的代码： div class="background-img" img src="cmpy-logo".background-img{ background:url('images/bg-img.png'); width:100%; height:698px; repeat-x; }cmpy-logo{position: absolute; bottom: -171px; right: 10px;} - PAM

是的，只需将 position: absolute; 更改为 position: fixed;，这样当页面滚动时它就会下降。如果它在右上角上方 200px：也尝试添加 margin: 0px; padding: 0px; 到图像样式中。我已经编辑了我的 fiddle 链接以包含这些样式。 - Mauno Vähä

Answer 3

如果您希望您的代码相对于窗口进行定位，请使用position：fixed。否则，请使用position：absolute，以便将其相对于文档进行定位。

相对于屏幕：

.background-img{

    position:fixed;
    right:10px;
    bottom: 10px 
}

相对于文档

.background-img{

    position:absolute;
    right:10px;
    bottom: 10px 
}

- Anoop

Answer 4

你可以试试这个

 <div class="outer">
    <img src="....">
 </div>

使用

 div.outer { position: relative; height: 24px; }
 div.outer img { position: absolute; right: 0; bottom: 0; }

- Rachel Gallen

Answer 5

我相信这也应该可以做到：

.background-img
{
   width:100%;
   height:698px; 
   background: url('images/bg-img.png') repeat-x 0 0;
}

还有一个background-position的CSS属性。

.background-img
{
   background:url('images/bg-img.png');
   width:100%;
   height:698px; 
   repeat-x;
   background-position: bottom right;
}

http://www.w3schools.com/cssref/pr_background-position.asp

- user568021