HTML-CSS实现背景图片出现不同的位置

 首先在HTML中写入div,命名为img，在这个div中加入一个span标签并命名为img-bg和img50（5星为50）.

<div class="img"><span class="img-bg img50"></span><span class="img-bg img45"></span><span class="img-bg img40"></span></div>

 在css代码中选中img-bg进行一个公共样式的调整（不能选中父集的类名）以下为本次图片。

.img-bg{display:inline-block;/*使变为行块盒，对其图片进行宽度高度的设置*/width: 55px;/*宽度*/height: 11px;/*高度设置为一排星星的高度*/background:url("背景图") no-repeat left top/100%;/*no-repeat 背景图不会重复，读取的位置为靠左靠上，宽度100%撑满（这里指的是上面设置的图片大小）*/

现在浏览器中出现的为：

开始对背景图进行定位

.img50{background-position:0 0;/* 横坐标纵坐标为0*/
}

以上出现的还是五星，位置没变。

以下为

.img45{background-position:0 -11px;/*纵坐标向下移动11个像素*/
}

此时出现的为4星半评分

以上

以下

.img40{background-position:0 -22px;
}

以下以此类推，每次纵坐标进行移动。

HTML-CSS实现背景图片出现不同的位置相关推荐

background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
php背景图片存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
用css控制背景图片的位置，大小
引用连接:http://hi.baidu.com/dengdan1025/blog/item/c3463bfba4c3969158ee90d5.html 对于图片,首先我们先想到是背景图片.因为我们许 ...
CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）
CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码）
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...
学习CSS的背景图像属性background
CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看background提供的属性值: background ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
CSS固定背景的图片
CSS固定背景的图片对于一些背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在某一位置. CSS通过background-attachment的值为fixed来实现. & ...
css 设置背景图片模糊，内容不模糊
方案: 内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. <!DOCTYPE html><html lang="en"> ...

HTML-CSS实现背景图片出现不同的位置

HTML-CSS实现背景图片出现不同的位置相关推荐

最新文章

热门文章