使 CSS Sprite 图像随着浏览器缩放的变化而相应调整大小

Question

我正在使用 css sprite，目前这就是它的样子 图标是 sprite 的一部分 它保持良好，但当我开始更改浏览器的缩放时，附近的图像开始在图像中渗出 相邻徽标渗入 我也尝试将内边距增加 100px，但这不是正确的解决方案。

我需要确保精灵图像保持正确的外观并且不会像页面一样出血 放大了。

我尝试使用 div 包装器，但在这种情况下它不起作用。 这是代码

.icon {
    width: 512px;; height: 512px;;
    background-size: auto 70%;
    height: 70%;
    background-position: center center;
    cursor: pointer;
    background-size: cover !important;
    background-repeat-x: no-repeat;
    /*zoom: 0.049;*/
    background: url("../resources/images/css_sprites_ico.png") 1px -3657px;
}

实现此功能的代码是这样的

 {name:'setup',index:'setup',label:'Setup',width:80,align:"center",search:false,sortable:false,cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
                      var classes = "icon";

Answer 1

.icon {
    width: 512px; 
    height: 512px;
    background: url("../resources/images/css_sprites_ico.png") no-repeat;
    background-size: 1024px 1024px; /* If your sprite image is 1024px by 1024px */
    background-position: -1024px -2048px; /* Adjust according to the exact position */
    cursor: pointer;
}

使用更新后的 css 'background-size' 和 'background-position' 值以及精灵图像中的实际尺寸和位置， 确保您的精灵图像在放大或缩小时保持其完整性而不会渗色