專案中需要做一個如下圖的右側監控操作控制檯，通過定位在這個圖片上放置了八個span，並設定內容為透明色，加點選事件來完成

覆蓋在操作檯圖上的位置如下圖：（去掉背景色設定字型為透明色就可以完美隱藏）

HTML程式碼如下

<divclass="monitoring-center-right"> <imgsrc="img/tu4.png"/> <spanclass="monitoring-console-top" @click="monitoringConsole(1)">上</span> <spanclass="monitoring-console-rightTop" @click="monitoringConsole(2)">右上</span> <spanclass="monitoring-console-right" @click="monitoringConsole(3)">右</span> <spanclass="monitoring-console-rightDown" @click="monitoringConsole(4)">右下</span> <spanclass="monitoring-console-down" @click="monitoringConsole(5)">下</span> <spanclass="monitoring-console-leftDown" @click="monitoringConsole(6)">左下</span> <spanclass="monitoring-console-left" @click="monitoringConsole(7)">左</span> <spanclass="monitoring-console-leftTop" @click="monitoringConsole(8)">左上</span> <!--<spanclass="monitoring-console-pause" @click="monitoringConsole(9)">暫停鍵</span>--> </div>

css程式碼如下

.monitoring-console-top {
    color: rgba(0, 0, 0, 0);
    top: 18%;
    right: 19%;
    position: absolute;
    width: 65px;
    height: 41px;
}

.monitoring-console-rightTop {
    color: rgba(0, 0, 0, 0);
    /* 旋轉 */
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    /* Internet Explorer 
 
*/
    -moz-transform: rotate(-44deg);
    /* Firefox */
    -webkit-transform: rotate(-44deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-44deg);
    /* Opera */
    position: absolute;
    width: 44px;
    height: 62px;
    top: 23%;
    right: 12%;
}

.monitoring-console-right {
    color: rgba(
 
0, 0, 0, 0);
    position: absolute;
    width: 40px;
    height: 60px;
    top: 44%;
    right: 9%;
}

.monitoring-console-rightDown {
    color: rgba(0, 0, 0, 0);
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -webkit-transform: rotate(-44deg);
    -o-transform: rotate(-44deg);
    position: absolute;
    width: 62px;
    height: 40px;
    right: 11%;
    bottom: 22%;
}

.monitoring-console-down {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 65px;
    height: 41px;
    bottom: 14%;
    right: 19%;
}

.monitoring-console-leftDown {
    color: rgba(0, 0, 0, 0);
    transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -webkit-transform: rotate(-44deg);
    -o-transform: rotate(-44deg);
    position: absolute;
    width: 39px;
    height: 67px;
    right: 29%;
    bottom: 18%;
}

.monitoring-console-left {
    color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 40px;
    height: 60px;
    top: 44%;
    right: 32%;
}

.monitoring-console-leftTop {
    color: rgba(0, 0, 0, 0);
    transform: rotate(44deg);
    -ms-transform: rotate(44deg);
    -moz-transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    -o-transform: rotate(44deg);
    position: absolute;
    width: 41px;
    height: 65px;
    top: 23%;
    right: 29%;
}