#chessboard {
    width: 360px;
    /* 棋盘图片的宽度 */
    height: 400px;
    /* 棋盘图片的高度 */
    padding: 10px;
    background-image: url('/src/assets/images/board.png'), url("/src/assets/images/bg.jpg");
    background-size: 100%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: absolute;
    /* 用于定位棋子 */
    top: 104px;
    left: 12px;
    z-index: 10;
    box-sizing: content-box;
    text-decoration: none;
    display: block;
    text-decoration-style: solid;
}

.piece-wrap {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-origin: padding-box;
    /* background-repeat: no-repeat; */
    cursor: pointer;
    box-sizing: content-box;
    display: block;
    float: left;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    outline-color: rgba(0, 0, 0, 0);
    outline-style: none;
    width: 40px;
    /* 棋子的宽度 */
    height: 40px;
    /* 棋子的高度 */
    position: relative;
    /* 用于在棋盘上定位 */
    background-size: 100%;
    /* 确保棋子图片覆盖整个元素区域 */
    text-decoration: none;
    z-index: 0;
}

.piece {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-origin: padding-box;
    /* background-repeat: no-repeat; */
    cursor: pointer;
    box-sizing: content-box;
    display: block;
    float: left;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    outline-color: rgba(0, 0, 0, 0);
    outline-style: none;
    width: 40px;
    /* 棋子的宽度 */
    height: 40px;
    /* 棋子的高度 */
    position: relative;
    /* 用于在棋盘上定位 */
    background-size: 100%;
    /* 确保棋子图片覆盖整个元素区域 */
    text-decoration: none;
    z-index: 1;
}

.b-select {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 40px;
    background-size: 100%;
    height: 40px;
    width: 40px;
    display: block;
}

.r-select {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 80px;
    background-size: 100%;
    height: 40px;
    width: 40px;
    display: block;
}

.piece-R {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 640px;
}

.piece-N {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 600px;
}

.piece-B {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 560px;
}

.piece-A {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 520px;
}

.piece-K {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 480px;
}

.piece-C {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 440px;
}

.piece-P {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 400px;
}

.piece-p {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 120px;
}

.piece-c {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 160px;
}

.piece-k {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 200px;
}

.piece-a {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 240px;
}

.piece-b {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 280px;
}

.piece-n {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 320px;
}

.piece-r {
    background-image: url("/src/assets/images/piece.png");
    background-position-y: 360px;
}