3

我想在主页的左侧放置一张图片。我知道如何在 html 中做到这一点，但我想在 CSS 类中创建它。我不知道我需要做什么来修复它。我要的图片叫做 Nobullying.jpg HTML：

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

}

还使用 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 回答