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