在做网页开发时, 客户给的素材图片通常都是连在一起的, 这样做也是为了缩短响应时间. 下面就给大家具体说一下 , 如何通过 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("图片存放路径"); /* 插入背景图 */
- ackground-repeat:no-repeat; /* 设置图片不重复 */
- background-color:#00ffff; /* 设置背景颜色 */
- background-position:60px 50px; /* 设置水平距离和垂直距离 */
- width:400px; height:200px;
- }
- </style>
- </head>
- <body>
- <div id="main"></div>
- </body>
- </HTML>
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14853.html