Question

我有以下代码：

.imgleft{
    background-image: url("logo.png");
    background-size: 100%;
    float: left;
}

...但我想让我的网站响应，所以当我的宽度小于650时，我希望我的图像不见了。

我尝试使用代码，但它不起作用：

@media screen and (max-width: 650px) {
    .imgleft{
        background-color: none;
    }
}

Answer 1

您只是删除background-color图片，而不会隐藏它：）

尝试使用display:none

@media screen and (max-width: 650px) {
    .imgleft{
        display: none;
    }
}

Answer 2

您要将background-color的值设置为无，而您应该将background-image的值设置为无。

所以，你想要实现的目标是：

@media screen and (max-width: 650px) {
    .imgleft {
        background-image: none;
    }
}

（有关演示，请参阅this Fiddle）

如果您不想要任何背景色或任何背景图片，您也可以这样做：

@media screen and (max-width: 650px) {
    .imgleft {
        background-color: transparent;
        background-image: none;
    }
}

（有关演示，请参阅this Fiddle）

......或者这个：

@media screen and (max-width: 650px) {
    .imgleft {
        background: transparent;
    }
}