Question

在这个网站的左侧菜单上点击一个项目时出现一个由jQuery创建的选定效果添加一个带有background-image的css样式，但是我不明白为什么背景图像不能自我扩展包含的li宽度。

这是我的网站：http://debatoversigt.dk/index.php/9-articles/7-sport 这是所选项目的CSS：

.selected {
    background-image: url('../images/left_menu_hover.png');
    background-repeat: no-repeat;
}

Answer 1

添加background-size属性

background-size: cover

Answer 2

背景图片的宽度为200px，但菜单项的宽度为205px，因此那里有5px个空格，您可以使用此样式来拉伸背景：

.selected {
    background-image: url('../images/left_menu_hover.png');
    background-repeat: no-repeat;
    background-size: 100% auto; /*  added  */
}

或像这样设置background-color:#fff;：

.selected {
    background-image: url('../images/left_menu_hover.png');
    background-repeat: no-repeat;
    background-color:#fff; /*  added  */
}

图像背景不会扩展其宽度

2 个答案: