在移动设备上展开背景图像以适合身体

时间：2015-07-26 07:45:52

标签： html css css3

我有5个div负责网站的背景。当用户在其中一个动作div上悬停指针时，背景会发生变化。在桌面背景图像显示完美，但在移动浏览器中我有类似截图 - 图像重复 enter image description here

我有这个css 

.page_background
{
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   min-width: 100%;
   min-height: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#bg_def
{
    background: url("/images/bg.jpg") fixed top !important;
}
#bg_kvadro
{
    background: url("/images/bg_kvadr.jpg") fixed top !important;
    display: none;
}

#bg_hotel
{
    background: url("/images/bg_hotel.jpg") fixed top !important;
    display: none;
}

#bg_palatka
{
    background: url("/images/bg_base.jpg") fixed top !important;
    display: none;
}

#bg_eat
{
    background: url("/images/bg_rest.jpg") fixed top !important;
    display: none;
}

部分HTML代码

<body>

<div class="page_background" id="bg_def"></div>
<div class="page_background" id="bg_hotel"></div>   
<div class="page_background" id="bg_eat"></div> 
<div class="page_background" id="bg_palatka"></div> 
<div class="page_background" id="bg_kvadro"></div>

我的问题是：如何扩展图像以适应身体？

1 个答案:

答案 0 :(得分：0)

将图像定义为子图像，而不是背景图像。

相关问题
最新问题