图标样式css,图标样式怎么改

如何用css显示一个图片中多个小图标？

CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。

先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)

首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：

.showImage{

    background-image: url(9pic2.jpg);

    width: 100px;

    height: 100px;

}

这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。

然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。

比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：

#item2{

    background-position: -100px 0;

}

其他的同理。

最后贴出来一个例子，看明白了这个属性就懂了。

用到的另一张图片名字叫9pic1.jpg,先贴出来：

代码如下：

!doctype html

html lang="en"

    head

    meta charset="UTF-8"

    title背景background-position切图/title

    style

        .showImage{

            background-image: url(9pic2.jpg);

            width: 100px;

            height: 100px;

        }

        .showImage:hover{

            background-image: url(9pic1.jpg);

        }

        ul{

            list-style: none;

        }

        ul li{

            float: left;

            margin: 20px;

        }

        #item1{

            background-position: 0 0;

        }

        #item2{

            background-position: -100px 0;

        }

        #item3{

            background-position: -200px 0;

        }

        #item4{

            background-position: 0 -100px;

        }

        #item5{

            background-position: -100px -100px;

        }

        #item6{

            background-position: -200px -100px;

        }

        #item7{

        background-position: 0 -200px;

        }

        #item8{

            background-position: -100px -200px;

        }

        #item9{

            background-position: -200px -200px;

        }

    /style

    /head

    body

        div class="container"

            ul

                li id="item1" class="showImage"/li

                li id="item2" class="showImage"/li

                li id="item3" class="showImage"/li

                li id="item4" class="showImage"/li

                li id="item5" class="showImage"/li

                li id="item6" class="showImage"/li

                li id="item7" class="showImage"/li

                li id="item8" class="showImage"/li

                li id="item9" class="showImage"/li

            /ul

        /div

    /body

/html

这个例子把那个图片打散，横排在页面上，还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。

相关问答

Q1: 这种图标用css怎么做

可以在阿里图库中下载相应的图标，下到本地后

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面

i class="iconfont"#x33;/i

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

i class="iconfont icon-xxx"/i

Q2: 谁帮我看看下图引用图标样式CSS这段代码是什么意思？尤其是 \e600；\e601；\e602.。。。是怎么来的

这段css代码用到了伪类:before和IcoMoon App在线生成图标，也就是你后边问的\e600这些。看你这个代码，应该是生成了一些小图标，左右箭头之类的。

可以参考下边这个文章，里边有详细的讲IcoMoon App 看到后边你就全明白了。

参考资料：

Q3: 框左边加一个小图标，css样式应该怎么写

输入框吧？方法很多给两种供选择。

输入框左侧加一个缩进(padding-left)空出图标空间，

1.如果图标是图片文件，作为输入框的背景图，不重复(no-repeat)，通过background-position调整图标位置

2.如果是字体图标，跟输入框放在同一个容器里，通过绝对定位，移动到相应位置

当然，图片文件的图标也可以用方法2，这样就能用雪碧图了

Q4: 每排文字前加小图标CSS样式怎么写

如果是列表，可以这样：

html

head

style type="text/css"

ul

{

list-style: square inside url('/image/example.gif')

}

/style

/head

body

ul

li咖啡/li

li茶/li

li可口可乐/li

/ul

/body

/html

Q5: css图标的写法

html代码部分

!doctype html

html

head

meta charset="utf-8"

title图标写法/title

/head

body

div id="icon"

span class="price"#65509;89.0/span

  a href="#" class="btn"去开团nbsp;gt;/a

/div

/body

/html

下面是css代码部分,处理了浏览器的兼容

style

#icon{display:inline-block;}

.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}

.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}

/style

效果图