如何使用 CSS 将背景颜色加入背景图像？

Question

我在使用 PNG 图像和 CSS 创建悬停效果时遇到问题。如下图所示，图像是一个三角形缺口。我正在尝试使背景颜色从图像向左延伸，而不是像我的示例中那样与其重叠。

Hover Background and Image

.parent-1:hover, .parent-2:hover, .parent-3:hover {
    background: #993408 url(/images/brown-notch.png) no-repeat right;
    background-size: contain;
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1;   
}

有没有办法让背景在图像开始的地方结束，这样它就变成了一个箭头并且可以响应？我试过了，但它没有响应：

.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
    content: '';
    background-color: #993408;
    background-position: left;
    position: absolute;
    display: block;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%;
    height: 100%;
}

Answer 1

假设您的图像是 10px，将 :before 元素的宽度设置为：

width: calc(100% - 10px);

如何使用 CSS 将背景颜色加入背景图像？

How to join a background colour to a background image using CSS?

html

css

mousehover

pseudo-element