怎么用CSS设置图片的位置。

html-css027

怎么用CSS设置图片的位置。,第1张

用Css设置图片的位置的话：

1.通过position的绝对定位，然后在通过left和top就可以设置你的图片位置了；代码如下

<div style='position:absolutleft:0pxtop:0px'>

<img src='图片地址'>

</div>

2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行，代码如下

<div>

<div style='flaot:leftwidth:330pxheight:200px'>

<p>我是左边的</p>

</div>

<div style='flaot:leftwidth:330pxheight:200px'>

<img src='图片地址'>

</div>

</div>

如何用css精确定位小图片的位置

首先设置固定图片的css属性是background-attachment

background-attachment它有两个属性值fixed/scroll

background-attachment：fixed表示固定图片，图片不随着页面滚动而滚动。

background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动

background-position这个属性用来定位图片的位置。

我们重点给大家分享background-position这个属性

2background-position的语法结构，用水平和垂直位置进行定位。

background-position:x y

其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；

y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；

两个属性值得中间一定要用英文的空格 ，隔开。

代码如下：

<style type="text/css">

   <!--

        #img{

         background-image:url("图片存放路径")   /*插入背景图*/

         background-repeat:no-repeat               /*设置图片不重复*/

        background-color:#00ffff                       /*设置背景颜色*/

        background-position:left center            /*用居中对齐设置水平距离，用下面对齐设置垂直距离*/

        width:400px height:150px  /*设置宽度 和高度*/

    }

-->

</style>

<div id="img"></div>

3background-position:左边距离 上边距离。这个用来找图片。

比如一张大图上面有很多小图，你只想用到其中一个小图就用这个找。

代码如下：

<html>

  <head>

     <style  type="text/css">

               #main{

               {

         background-image:url("图片存放路径")   /*插入背景图*/

         background-repeat:no-repeat               /*设置图片不重复*/

        background-color:#00ffff                       /*设置背景颜色*/

        background-position:60px 50px       /*设置水平距离和垂直距离*/

           width:400pxheight:200px

}

     </style>

  </head>

  <body>

           <div id="main"></div>

  </body>

</html>