Question

假设我这样做了：

@media only screen and (min-width: 1366px)
    .someBg {
         background-image: url('someBg_BIG.jpg');
    }
}

现在覆盖背景图像：

@media only screen and (max-width: 480px)
    .someBg {
         background-image: url('someBg_SMALL.jpg');
    }
}

问题：对于480px以下的设备 - css是否会首先覆盖该类，然后仅加载被覆盖的图像？或者首先加载图像然后决定哪一个会有更多的优先级？

Answer 1

使用@media时，只会加载适当的图像。如果分辨率超过768px（例如），则仅加载一个图像。如果分辨率小于768px，则也只会加载一个图像。但是，如果您将窗口从800px调整为500px，则会加载两个图像。您可以在Chrome检查器中进行检查。

＆＃13;

img {
  width: 400px;
  content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}

@media screen and (max-width: 768px) {
  img {
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
  }
}

＆＃13;

<img alt="">

＆＃13;

Answer 2

您正在使用css @media查询，这些查询仅用于根据屏幕大小更改样式，但不会影响任何内容的加载。

所以这里如果你使用这个css，那么两个图像将首先加载，然后根据屏幕大小显示。

Answer 3

你可以试试这个

css：

＆＃13;

.somebg{
	max-width: 1400px;
	padding: 0;
	margin: 0;
}
.somebg img{
    width: 100%;
}

＆＃13;

并在html中： <div class="somebg"><img src="URL HERE"></div>

使用较小的图像覆盖`background-image`以获得较小的css设备，可以节省带宽还是减少加载时间？

3 个答案: