您现在的位置是：网站首页> 编程资料编程资料

CSS background 控制显示图片的一部分CSS background全部汇总CSS的background属性及CSS3的背景图片设置总结CSS制作边框效果的技巧总结详解使用CSS固定页面背景图片位置的方法使用CSS3来实现滚动视差效果的教程CSS3属性background-size使用指南CSS背景background、background-position使用详解 css中background-size属性使用介绍纯css实现元素下出现横线动画（background-image）

2021-09-06 750人已围观

简介采用一张图片多种效果或内容显示，这时就可以使用background进行定位控制显示图片的某一部分，实现代码如下，从事web前端的朋友可以看看

使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片，竖直y轴方向分别是字母：A,B,C....
现在分别要显示A、B、C 等字母，我们的CSS可以这么写：
这里图片一个字母所占的width=20px,height=20px;

复制代码

代码如下:

.mar_wordA {
background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent;
}
.mar_wordB {
background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent;
}
.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent;
}

若果是水平方向的图片，调整x轴的值即可。
注：需要容器负载图片。

上一篇：IE浏览器单独写CSS样式的几种方法用条件注释判断浏览器版本解决页面兼容问题

下一篇：布局和排版教程纯css3实现图片三角形排列纯CSS3+DIV实现小三角形边框效果的示例代码详解css如何利用 :before :after 写小三角形CSS3 画基本图形，圆形、椭圆形、三角形等用CSS3绘制三角形的简单方法使用css创建三角形使用CSS3创建3d四面体原理及代码(html5实践)CSS3实现三角形不断放大效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢