如何使用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

假设您的图片为10像素，请将：before元素上的宽度设置为：

width: calc(100% - 10px);