时间戳

首页 > 解决方案 > 如何使用 CSS 将背景颜色加入背景图像？

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

问题描述

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

悬停背景和图像

.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%;
}

标签： htmlcsspseudo-elementmousehover

解决方案

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

width: calc(100% - 10px);

推荐阅读