Question

您好我有以下CSS类和dom元素

<button [ngClass]="{ 'filter-icon-open': open, 'filter-icon-close': !open }">
</button>

CSS

.open-filter {
    cursor: pointer;
    float: right;
    button {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: initial;
    }
    button:hover {
        background-image: url("./../../../../assets/images/ico_filter_over.png");
        background-color: $dbsred;
        border: none;
    }
    button:focus {
        outline:none;
    }
}

.filter-icon-open {
    background-image: url("./../../../../assets/images/ico_filter_over.png");
    background-color: red;
}

.filter-icon-close {
    background-image: url("./../../../../assets/images/ico_filter.png");
    border: solid #B3B3B3 1px;
}

它非常适合镀铬。但对于IE来说，图标很大。怎么解决这个问题。新手到CSS。有人可以帮忙吗提前谢谢。

尝试：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../../../../assets/images/ico_filter.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../../../../assets/images/ico_filter.png', sizingMethod='scale')";

但是我看到这部分已经在Chrome中被注释掉了，它也没有用。

Answer 1

IE不支持

initial。对于IE，允许的值为background-size 根据{{3}}：

background-size: [ <length> | <percentage> | auto ] {1,2} | cover | contain [ , [ <length> | <percentage> | auto ] {1,2} | cover | contain ]*

此外，initial只是将属性设置为属性的默认值，而对于background-size，默认值为auto。因此，您可以直接使用它或使用上述任何值。

Answer 2

如果问题是打开和关闭图像的大小不同，您可以使用CSS在浏览器中调整图像大小：

.filter-icon-open {
    background-image: url("./../../../../assets/images/ico_filter_over.png");
    background-color: red;
    height : 100px;
    width : 100px;
}

.filter-icon-close {
    background-image: url("./../../../../assets/images/ico_filter.png");
    border: solid #B3B3B3 1px;
    height : 100px;
    width : 100px;
}

这将强制打开和关闭图像的大小相同，但是，我个人建议不要使用这种方法，因为它可能会导致图像倾斜或像素化。

更好的解决方案是使用您选择的图像编辑工具（如Photoshop）调整图像大小。

background-size：初始不在IE10和

2 个答案: