如何用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伪类实现了你鼠标移动到上面就从黑白变彩色。


相关文章
|
1月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
5天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
19 2
|
27天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
24 5
|
27天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
44 4
|
29天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
18 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
2月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
90 1
|
2月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
53 0
|
4月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
79 0
|
4月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
113 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
4月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!