Question

我试图想出一个循环CSS背景图片的幻灯片，原因是因为我已经构建了一个响应式Joomla模板，在横幅中有幻灯片放映。我一直试图想出一种基于屏幕宽度修改图像的方法，这种方式没有硬编码到CSS中，因此客户可以根据需要修改图像。

我有以下HTML代码

<section id="banner-image" class="row-fluid">
 <div class="span12">
   <div class="banner-slideshow">
    <div class="slideshow-image" id="image1"></div>
    <div class="slideshow-image" id="image2" style="display: none;"></div>
    <div class="slideshow-image" id="image3" style="display: none;"></div>
   </div>                       
  </div>                    
</section>

以下基本CSS

.banner-slideshow {
  position: relative;
  margin: 0;
  width: 100%;
  padding-bottom: 31.25%;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  padding: 0;
  padding-top: 31.25%;  /* 400px/1280px = 0.3125 */  
  /*background-image: url(../images/redcourt_banner_1_1280_400.jpg);*/
  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

然后使用jquery和PHP动态生成以下代码，并将其作为直接样式插入到文档的头部

<style type="text/css">
        @media (min-width: 768px) {
            #image1 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_desktop_1')?>);
            }
            #image2 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_desktop_2')?>);
            }
            #image3 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_desktop_3')?>);
            }
        }

        /* Landscape phone to portrait tablet */
        @media (min-width: 481px) and (max-width: 767px) {
            #image1 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_tablet_1')?>);
            }
            #image2 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_tablet_2')?>);
            }
            #image3 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_tablet_3')?>);
            }
        }

        /* Landscape phones and down */
        @media (max-width: 480px) {
            #image1 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_mobile_1')?>);
            }
            #image2 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_mobile_2')?>);
            }
            #image3 {
            background-image: url(<?php echo JURI::root() . $this->params->get('imgBanner_mobile_3')?>);
            }
        }



    </style>

正如我输入的那样，我刚刚解决了它是媒体查询....你能看到解决方法还是有任何其他可预见的问题？

提前致谢。

背景图片幻灯片在IE中不起作用

0 个答案: