17

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

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

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

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

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

4

5 回答 5

27

您可以使用绝对定位：

position: absolute;
right: 0px;
bottom: 0px;
于 2012-11-04T11:12:13.303 回答
12

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

或者

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

我创建了一个演示差异的小提琴，JsFiddle 示例

于 2012-11-04T11:13:34.747 回答
1

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

相对于屏幕：

.background-img{

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

相对于文档

.background-img{

    position:absolute;
    right:10px;
    bottom: 10px 
}
于 2012-11-04T11:13:15.820 回答
1

你可以试试这个

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

和

 div.outer { position: relative; height: 24px; }
 div.outer img { position: absolute; right: 0; bottom: 0; }
于 2012-11-04T11:14:03.400 回答
0

我相信这也应该这样做：

.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

于 2012-11-04T11:12:59.160 回答