html - CSS：倾斜居中的背景

Question

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

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

谢谢！

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 */
}

标签： htmlcssbackgroundbackground-positionskew

Answer 1

Temani Afif 为翻译添加了 50% 的偏移量，并做了 50% 的左移。看评论。