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

Question

创建饼图后， 我想在每个部门中添加自定义图像。 我试图添加图像但不能。 谁能帮我解决这个问题。提前谢谢你。

这是我尝试过的，以下是我的代码。 提前谢谢你

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

Answer 1

使用以下流程:

• 将position:relative添加到piecontainer
• 添加一个position:absolute图像元素来匹配每个切片的坐标
• 在每个图像上使用 clip:rect 来匹配每个切片的相应矩形

引用资料

• > vml clipping mask