CSS background 操纵显示信息照片的1一部分

2021-01-20 08:30 jianzhan
应用情况:避免不断恳求照片資源,大家常常选用1张照片多种多样实际效果或內容显示信息。
假定我有纸张垂直方位的1张照片,垂直y轴方位各自是字母:A,B,C....
如今各自要显示信息A、B、C 等字母,大家的CSS能够这么写:
这里照片1个字母所占的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 ⑵0px transparent;
}
.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 ⑷0px transparent;
}

若果是水平方位的照片,调剂x轴的值便可。
注:必须器皿负载照片。