CSS：倾斜居中背景

Question

我正在尝试使用3张图像制作导航菜单。当您将鼠标悬停在它们上方时，我正在扩展已悬停的鼠标，然后折叠其余的鼠标。棘手的部分是我正在做的偏斜。我能够使它偏斜背景，但似乎无法使背景居中于主要内容所在的图像上。它似乎从图像的左上方开始，而不是从中心开始。

我希望有人能够指出正确的方向。如何使背景图像居中而不是使背景从左上方开始？我尝试使用背景位置属性没有运气。

谢谢！

https://jsfiddle.net/jspada/4jrhc2eb/5/

.diagonal_box_a {
    transform: skewX(35deg);
    -ms-transform: skewX(35deg); /* IE 9 */
    -webkit-transform: skewX(35deg); /* Safari and Chrome */
    width: 250px;
    height: 357px;
    border-right: 1px solid black;
    border-left: 1px solid black;

    /* new styles */
    position: relative;
    top: 0;
    right: 0;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    transition: width 0.5s ease;
}

.diagonal_box_a:hover {
    width: 750px;
}

.diagonal_box_a::before {
    content: "";
    transform: skewX(-35deg);
    -ms-transform: skewX(-35deg); /* IE 9 */
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */
    border: 1px solid red;
    background-image: url("img/placeholder_desert.jpeg");
    background-repeat: no-repeat;
    background-position: top left;
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1500px; /* something ridiculously big */
    height: 1500px; /* something ridiculously big */
}

Answer 1

Temani Afif为翻译增加了50％的偏移量，而剩下的50％。看评论。