Question

如何在单个背景图像中设置两个图像？我有两张照片，但有两个分开的问题（一个覆盖另一个）。

以下是我对该div的风格。

.layout_core_menu_logo {
    padding: 20px 0 0px 0;
    background: url(~/application/xxx.gif) transparent no-repeat top;
    background-size: 968px 200px;
    a { 
        background: url("/application/xx1.gif?c=573") no-repeat,url("/application/themes/xx2.gif")no-repeat;
        width:1160px;
        height: 187px;
        display: block;
        text-indent: -9999px;
        position: relative; top: 20px; left: 0px;    
    }
}

Answer 1

 <style>
   a { 
       background:url("/application/xx1.gif?c=573&c=573") no-repeat scroll 51% 60%, 
       url("/application/xx2.gif?c=573") no-repeat scroll 0% 20% transparent ;
   }
<style>

Answer 2

您需要指定每张图片的位置和背景大小。

 .layout_core_menu_logo {
   padding: 20px 0 0px 0;
   background: url(http://www.mvploops.com/files/_willow/categories/281_Sample-    Packs.jpg) transparent no-repeat top;
   background-size:100% 100%; 
  }
  a { 
    background: url("http://www.detailinggurus.com/images/sample_bottles.jpg") no-repeat top left,url("http://www.mclub.com.ua/images/alb/cover42163_148565.jpg")no-repeat top right;
    background-size:50% 100%, 50% 100%;
    width:968px;
    height: 187px;
    display: block;
    text-indent: -9999px;
    position: relative; top: 20px; left: 0px;    
 }

Sample Fiddle

在单个背景图像中设置两个图像，对齐好吗？

2 个答案: