在單個背景圖像中設置兩個圖像，對齊性好嗎？

如何在單個背景圖像中設置兩個圖像？我有兩張照片，但將這兩張圖片分開存在問題（一張疊在另一張上）。在單個背景圖像中設置兩個圖像，對齊性好嗎？

下面是我對這個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;  
    } 
}

來源

2014-06-19 nav

修復佈局，這是很難讀 – Maxzeroedge

還沒有嘗試使用background-position？ – Maxzeroedge

a {background：url（「/ application/themes/epatients/images/coa/title_ortho.gif？c = 573」）no-repeat，url（「/ application/themes/epatients/images/coa/title_ca.gif」）不重複; width：1160px; height：187px; display：block; text-indent：-9999px; 位置：相對; top：20px; left：0px; }這個部分的問題 – nav

<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>

來源

2014-06-19 11:02:40 nav

你需要指定每個圖像的位置和背景大小。

.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

來源

2014-06-19 11:09:40

在單個背景圖像中設置兩個圖像，對齊性好嗎？

回答

相關問題