Question

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

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

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

我使用1px图片创建了背景图片。现在我必须在页面右下角放置公司徽标如何做到这一点..

任何建议以及如何对此进行编码..进展谢谢......

Answer 1

您可以使用绝对定位：

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

Answer 2

您可以使用position: fixed; bottom: 0px; right: 0px;确保公司徽标始终显示在右下角 - 这意味着页面滚动不会影响其位置。

或

您可以使用position: absolute; bottom: 0px; right: 0px;来确保您的公司徽标位于特定位置，并且会受到滚动页面的影响。

我创建了一个小提琴来演示差异， JsFiddle example

Answer 3

如果您希望代码相对于窗口定位，则使用位置固定其他位置：绝对，如果您希望它相对于文档定位。

相对于屏幕：

.background-img{

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

相对于文件

.background-img{

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

Answer 4

你可以试试这个

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

与

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

Answer 5

我相信这也应该这样做：

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

还有背景位置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

如何在右下角对齐图像

5 个答案: