Question

我想在我的主页左侧放置一张图片。我知道如何在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

Answer 1

#picture { 
 background-image:url('no-bullying.jpg');
 height:100px;
 width:50px;
 position: absolute;
 bottom:10px;
 left:10px;
}

Answer 2

像这样调整你的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'）;

Answer 3

或者您可以使用fixed定位将其保持在该位置，而不管滚动。

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

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

}

也使用url（）和no-repeat作为背景图片。

Answer 4

您的background-image规则中存在语法错误。除此之外，您可以使用position:absolute来定位元素

#picture{
    background-image: url(Nobullying.jpg);
    width:40px;
    height:40px;
    position:absolute;
    left:10px;
    bottom:10px;
}

Answer 5

#picture{
   background-image:url(Nobullying.jpg);
   width:40px; height:40px;
   float:left;
   }

我在这里使用的ID不是一个类。应使用ID =“图片”识别图像。

在CSS中使用float时会有点棘手。如果您已经可以在html中执行此操作，只需使用html。否则，你将需要学习一些额外的东西。

答案已更新

如何在css上对齐图像？

5 个答案: