请教CSS图片左侧定位代码

html-css012

请教CSS图片左侧定位代码,第1张

<style type="text/css">

.left-img{float:leftposition:fixedtop:20pxleft:10px}

</style>

<img class="left-img" src="img.png" width="180" height="180" alt=""/>

注解:

<style type="text/css">....</style>/ 页内定义(CSS样式标签)

.left-img / 定义样式名称

{....} /定义样式

float:left //左浮动(float: right右浮动)

position:fixed//固定元素不随滚动条滚动 (position: absolute绝对定位,随滚动)

top:20px //距离页面顶部距离

left:10px//距离页面左侧距离

<img class="left-img" /指定给图像Img标签css样式.left-img

以上可以实现你需要的效果,但还是建议你系统化的学习下

百度关键词css 第一个站点w3school比较全面,前端架构师必读~

绝对居左下的方式:

图片包括任何的标签都是不能默认绝对居下的,都是需要通过css样式控制的,这个就要用到定位。给img添加一个绝对定位position:absoluteleft:0bottom:0也需要给它的某个父级添加一个相对定位。

img标签是向网页中嵌入一幅图像。

注意,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

<img>标签有两个必需的属性:src 属性 和 alt 属性。

如何用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>