html - 使用 CSS3 使 Sprite 响应

Question

我尝试使用 CSS3 制作响应式 Sprite (背景图像)。就像我这样做但 div 中没有显示任何内容，我认为应该有一些内容(但我不想放置任何内容)以便 div 获得一些高度，然后显示背景图像。

HTML:

<div class="cbs-news-logo"/>

CSS:

.cbs-news-logo { 
    background-position: 0 27.272727%; 
    background-size: 122.439024%; 
    max-width: 100%; 
    background-image: url('logos.png'); 
}

我尝试了很多链接，但找不到一个好的链接。

Answer 1

如果我理解你..

.cbs-news-logo{ // Responsive background
  background: url('logos.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: NNN px) { // if you do not want to show any content until some properties ( note that now is max-with, but it can be other )
  .cbs-news-logo{ (...)
}