Question

在这里查看 Fiddle 。

如您所见，我在同一<div>中有两个小背景图像。

我希望能够将每个链接链接到网络上的相应链接。不太确定怎么做这个......

这个div的CSS ......

.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;
}

Answer 1

我会尝试这样做：

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

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

1 个答案: