如何通过css属性来定位图片

作者:彼岸花开 | 创建时间: 2023-07-11
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间。下面小编就给大家具体说一下 ,如何通过css属性来定位图片。...
如何通过css属性来定位图片

操作方法

首先设置固定图片的css属性是background-attachment background-attachment它有两个属性值fixed/scroll background-attachment:fixed;表示固定图片,图片不随着页面滚动而滚动。 background-attachment:scroll;表示不固定图片,图片随着页面滚动而滚动 background-position这个属性用来定位图片的位置。 我们重点给大家分享background-position这个属性

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

background-position:左边距离 上边距离。这个用来找图片。 比如一张大图上面有很多小图,你只想用到其中一个小图就用这个找。 代码如下: <html> <head> <style  type="text/css"> #main{ { background-image:url("图片存放路径");    /*插入背景图*/ background-repeat:no-repeat;                /*设置图片不重复*/ background-color:#00ffff;                        /*设置背景颜色*/ background-position:60px 50px;        /*设置水平距离和垂直距离*/ width:400px; height:200px; } </style> </head> <body> <div id="main"></div> </body> </html>

点击展开全文

更多推荐