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

コードをウィンドウに対して相対的に配置する場合は position fixed を使用し、ドキュメントに対して相対的に配置する場合は position: absolute を使用します。

画面に対して:

.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;
}

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

于 2012-11-04T11:12:59.160 に答える