Question

我正在制作一个启动页面，让用户选择页面的语言，我有一些调整，我不能完成... 我希望链接的可点击表面仅在圆圈内，目前可以在圆圈外单击。我看到它也可以用SVG完成，但我从未尝试过实现SVG代码，所以我选择了链接标签......

HTML：

<div class="container">
        <div class="meni">
            <ul>
            <li>
            <a href="home.html"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png"></a>
            </li>

            <li>
            <a href="home.html"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png"></a>
            </li>
            </ul>
        </div>   
   </div>

CSS：

body{
    background-image: url(http://cdn.playbuzz.com/cdn/20b7c734-ef8e-438c-8d02-8353fbfd06cb/40bd6a7e-2809-4008-82da-d3c68a07f1ae.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.container{
    position: absolute;
    top: 35%;
    left: 35%;

}

li{
    list-style: none;
    float: left;
    padding: 4em;
}

Answer 1

尝试以下

<强> CSS

<style>
    body
    {
        background-image: url(http://cdn.playbuzz.com/cdn/20b7c734-ef8e-438c-8d02-8353fbfd06cb/40bd6a7e-2809-4008-82da-d3c68a07f1ae.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
    }
    .circle
    {
        width: 106px;
        height: 106px;
        border-radius: 155px;
        background-color: grey;
        top: 18px;
        left: 10px;
        overflow:hidden;
    }

    .circleoutline
    {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 150px;
        -webkit-border-radius:150px;
        left: -11px;
        top: -11px;
    }
</style>

<强> HTML

<div class="circle">
    <a href="#">
        <div class="circleoutline">
            <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png">
        </div>
    </a>
</div>

<强> Fiddle

Answer 2

您也可以使用图片地图。请找{4}}

HTML：

<div class="container">
        <div class="meni">
            <ul>
            <li>
            <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png" usemap="#iconmap1">
            <map name="iconmap1">
               <area shape="circle" coords="64,64,54" href="home.html" alt="replay icon">
             </map>
            </li>

            <li>
             <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png" usemap="#iconmap2">
            <map name="iconmap2">
               <area shape="circle" coords="64,64,54" href="home.html" alt="replay icon">
             </map>
            </li>
            </ul>
</div>

制作超链接圈标签？

2 个答案: