添加動態鏈接到多個背景圖片...

檢查出Fiddle在這裏。添加動態鏈接到多個背景圖片...

正如你所看到的，我在同一<div>有兩個小背景圖像。

我希望能夠將每一個鏈接到網絡上的相應鏈接。不太清楚如何做到這一個...

CSS爲這個div ...

.iso-container li { 
    background: #f8981d; 
    background-image: url(http://webfro.gs/south/kb2/images/pdf-button.png), url(http://webfro.gs/south/kb2/images/bxw_email.png); 
    background-position: 75% 90%, 25% 90%; 
    background-repeat: no-repeat; 
    padding-left: 10px; 
    color: #FFFFFF; 
    font-weight: bold; 
    text-align: center; 
    font-size: .9em; 
}

來源

2013-09-16 webfrogs

當你說鏈接他們到適當的鏈接，你的意思是像一個錨標籤？你有沒有看過？當指針懸停在圖像上時，您是否希望進行鏈接？ – CodeGodie

是的。我可以爲單個背景圖像創建href標記，但可以創建多個背景圖像，我從來沒有這樣做過。 – webfrogs

那是因爲這是不可能的。沒有意義，只要將它們分成兩個元素 –

我會嘗試做這樣的事情：

<style> 
.iso-container li { 
    width: 140px; 
    height: 140px; 
    margin: 5px; 
    position: relative; 
    background: #f8981d; 
    font-size: 0.01em; 
    color: #FFFFFF; 
    font-weight: bold; 
    text-align: center; 
    font-size: .9em; 
    -webkit-border-top-right-radius: 1.2em; 
    -webkit-border-bottom-left-radius: 1.2em; 
    -webkit-border-top-left-radius: 1.2em; 
    -webkit-border-bottom-right-radius: 1.2em; 
    -moz-border-radius-topright: 1.2em; 
    -moz-border-radius-topleft: 1.2em; 
    -moz-border-radius-bottomright: 1.2em; 
    -moz-border-radius-bottomleft: 1.2em; 
    border-top-right-radius: 1.2em; 
    border-top-left-radius: 1.2em; 
    border-bottom-right-radius: 1.2em; 
    border-bottom-left-radius: 1.2em; 
    border-radius: 1.2em; 
    behavior: url(pie/PIE.htc); 
} 

.iso-container li a{ 
    width: 20px; 
    padding: 10px; 

} 

</style> 

<ul class="iso-container clearfix"> 
    <li class="item" id="_1"> 
    <h3 class="doc title">2013-2014 Verification Worksheet <br />(Dependent)</h3> 
    <a href="your link"> 
     <img src="http://webfro.gs/south/kb2/images/pdf-button.png" /> 
    </a> 
    <a href="your link"> 
     <img src="http://webfro.gs/south/kb2/images/bxw_email.png" /> 
    </a> 
    </li> 
</ul>

來源

2013-09-16 13:30:06 CodeGodie

希望這有助於 – CodeGodie

添加動態鏈接到多個背景圖片...

回答

相關問題