3

ホームページの左側に画像を載せたいです。HTMLでそれを行う方法を知っていますが、CSSクラスで作成したいと思います。私はそれを修正するために何をする必要があるのか​​分かりません。私が欲しい写真はNobullying.jpgHTMLと呼ばれています：

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="body.css"/>
  </head>
  <body>
  <h1>Bully-Free Zone</h1>
  <h2>"Online harassment has an off-line impact"</h2>
  <!--Menu-->I
  <div id="nav">
  <a href="mainpage.htm" class="nav-link">HOME</a>
  <a href="page1.htm" class="nav-link">ASSISTANCE</a>
  <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
  <a href="page3.htm" class="nav-link">REPORT</a>
  </div>
  <div id="picture"></div>
  <!--Copyright-->
  <div id="center">
  <td> Copyright © 2012 Bully-FreeZone.com</td>
  </div>

  </body>
  </html>

Cssクラス：

   #picture{background-image:Nobullying.jpg;
   width:40px; height:40px;
   }

これが私が写真を撮りたいところです。（赤いボックス） http://imgur.com/Ef2Au

4

5 に答える 5

6 
#picture { 
 background-image:url('no-bullying.jpg');
 height:100px;
 width:50px;
 position: absolute;
 bottom:10px;
 left:10px;
}
于 2012-04-17T15:01:02.573 に答える
3

次のようにCSSを調整します。

#picture{
   background-image:url('/path/to/Nobullying.jpg');
   width:40px; height:40px;
   position: absolute; /* this removes it from document flow */
   left: 5px; /* this places image 5px away from the leftmost area of the container */
              /* you can choose from left/right and top/bottom for positioning */
              /* play around with those and you should get a hang of how it works */
}

注意：css背景画像を使用する場合、パスはcssファイル（cssが含まれているhtmlファイルではありません）の観点からのものです。

したがって、ディレクトリ構造が次のようになっている場合

root
--> css    -> styles.css
--> images -> Nobullying.jpg
--> index.html

次に、パスは次のようになります。url('../images/Nobullying.jpg')または `url（'/ images / Nobullying.jpg'）;

于 2012-04-17T15:03:33.983 に答える
2

fixedまたは、ポジショニングを使用して、スクロールに関係なくその位置を維持することもできます。

#picture{
    background: url(Nobullying.jpg) no-repeat;
    width:40px;
    height:40px;

    position: fixed;
    bottom:10px;
    left:10px;

}

また、background-imageにはurl（）とno-repeatを使用します。

于 2012-04-17T15:04:50.633 に答える
1

background-imageルールに構文エラーがあります。position:absoluteその上、要素を配置するために使用できます

#picture{
    background-image: url(Nobullying.jpg);
    width:40px;
    height:40px;
    position:absolute;
    left:10px;
    bottom:10px;
}
于 2012-04-17T15:08:44.710 に答える
0 
#picture{
   background-image:url(Nobullying.jpg);
   width:40px; height:40px;
   float:left;
   }

ここではクラスではなくIDを使用しました。画像はID="picture"で識別される必要があります。

CSSでは、floatを使用すると少し注意が必要です。すでにhtmlでこれを実行できる場合は、htmlを使用してください。そうでなければ、あなたはいくつかの余分なことを学ぶ必要があります。

答えが更新されます

于 2012-04-17T15:02:45.223 に答える