jquery - 如何在响应式图像上使悬停状态背景 100% 宽度

Question

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

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

任何人都可以解释实现 100% 宽度背景的最佳方法吗？我的背景图像上有填充，所以我不能保持黑色背景与图像齐平。

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

我希望这是有道理的。

http://jsfiddle.net/isherwood/x59tB/15/

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