Html 如何将自定义图像添加到饼图？

创建饼图后， 我想在每个扇区添加自定义图像。 我试图添加图像，但无法添加。 谁能帮我一下吗。先谢谢你

这是我尝试的，下面是我的代码。 先谢谢你

<style>
    .pieContainer {
        height: 100px;
    }
    .pieBackground {
        background-color: grey;
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: -1px 1px 3px #000;
        -webkit-box-shadow: -1px 1px 3px #000;
        -o-box-shadow: -1px 1px 3px #000;
        box-shadow: -1px 1px 3px #000;
    }
    .pie {
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        clip: rect(0px, 50px, 100px, 0px);
    }
    .hold {
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        clip: rect(0px, 100px, 100px, 50px);
    }
    #pieSlice1 .pie {
        background-color: #1b458b;
        -webkit-transform:rotate(50deg);
        -moz-transform:rotate(50deg);
        -o-transform:rotate(50deg);
        transform:rotate(50deg);
    }
    #pieSliceBlue .pie {
        background-color: #1b458b;
        -webkit-transform:rotate(100deg);
        -moz-transform:rotate(100deg);
        -o-transform:rotate(100deg);
        transform:rotate(100deg);
    }
    #pieSliceBlue2 {
        -webkit-transform:rotate(100deg);
        -moz-transform:rotate(1000deg);
        -o-transform:rotate(100deg);
        transform:rotate(100deg);
    }
    #pieSliceBlue2 .pie {
        background-color:#FF0;
        -webkit-transform:rotate(140deg);
        -moz-transform:rotate(140deg);
        -o-transform:rotate(140deg);
        transform:rotate(140deg);
    }
    #pieSliceRed {
        -webkit-transform:rotate(220deg);
        -moz-transform:rotate(220deg);
        -o-transform:rotate(220deg);
        transform:rotate(220deg);
    }
    #pieSliceRed .pie {
        background-color: #cc0000;
        -webkit-transform:rotate(140deg);
        -moz-transform:rotate(140deg);
        -o-transform:rotate(140deg);
        transform:rotate(140deg);
    }
</style>

<div id="pieContainer">
    <div class="pieBackground"> </div>
    <div id="pieSlice1" class="hold">
        <div class="pie"></div>
    </div>
    <div id="pieSliceBlue" class="hold">
        <div class="pie"></div>
    </div>
    <div id="pieSliceBlue2" class="hold">
        <div class="pie"> </div>
    </div>
    <div id="pieSliceRed" class="hold">
        <div class="pie"></div>
    </div>
</div>

---

使用以下过程：

添加位置：相对于容器 添加位置：绝对图像元素以匹配每个切片的坐标 在每个图像上使用clip:rect以匹配每个切片的相应矩形 参考资料

---

很好，那么你的代码呢？没有你的代码我们怎么解决你的问题？？？？@Gajotres，添加了我的代码