Question

我创建了一些响应式图像，但希望显示用户名的悬停状态。

我已经设法使用Css和Jquery创建悬停状态，但不幸的是，当我更改屏幕宽度时，悬停背景不会保持100％。

有人可以解释达到100％宽度背景的最佳方法吗？我的背景图像上有填充，所以我不能让黑色背景与图像齐平。

这是解释我的意思的小提琴。

我希望这是有道理的。

.show-username{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    bottom: 0px;
    padding: 5px;
    font-size: 11px;
    width: inherit;
    display: none;
}

Answer 1

你有两个问题：

此css规则的宽度样式导致拉伸问题。它将始终覆盖您现有的样式，因为id的优先级高于类选择器：

#upload-container ul li span {
    font-size: 16px;
    line-height: 22px;
    display: block;
    width: 82%; // <---- Move this style
    position: absolute;
    bottom: 13px;
 }

为您的.show-username css规则添加右侧和左侧声明：

.show-username{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    bottom: 0px;
    padding: 5px;
    font-size: 11px;
    width: inherit;
    display: none;
    right: 10px;
    left: 10px;
}

如何使响应图像上的悬停状态背景100％宽度

1 个答案: