使用CSS3使精灵响应

Question

我尝试使用CSS3制作响应式精灵（背景图片）。就像我这样做但div中没有​​显示任何内容，我认为应该有一些内容（但我不想放任何内容）以便div获得一些高度，然后将显示背景图像。 / p>

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

＆＃13;

＆＃13;

.cbs-news-logo { 
  
    background-image:url('https://www.google.co.in/images/srpr/logo11w.png'); 
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    min-height:125px; // if u want change hear 
    max-width:800px;  // if u want change hear
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解你..

.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{ (...)
}

Answer 3

以下是最简单的解决方案：

<强> 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'); 
    padding-bottom: 16%;  // This will give height to the div and make the div responsive so the (background) image behaves as responsive image.
}

如果您想查看demo。