添加动态链接到多个背景图片...

检查出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

添加动态链接到多个背景图片...

回答

相关问题