Question

我在html 5中有一组div s，其类名为submenuButton。我想使用css为这些div添加一个共同的背景图像。我尝试了以下方法：

.submenuButton{
     background-image:url(images/but-up-center.png); 
     background-position: 5px 0px;
     background-repeat:repeat-x;
     background-size: contain;
}

这会将div图像从左侧设置为5px并延伸到按钮的末尾。但是我希望这张图片也能从右边5px结束。

那么，是否有人可以建议在css中可以做什么，以便在左侧和右侧留下5px空间。

Answer 1

您可以将background-clip: content-box;与左右5px填充结合使用。

这将为您提供以下代码：

.submenuButton{
    padding: 0 5px;
    background-image:url(images/but-up-center.png);
    background-repeat:repeat-x;
    background-size: cover;
    background-clip: content-box;
}

有关background-clip的更多信息，请访问developer.mozilla.org

Example on jsFiddle

Answer 2

你可以用伪

来做

＆＃13;

.submenuButton {
    position: relative;
    border: 1px solid red;
    height: 100px;
    width: 200px;
}
.submenuButton::before {
    position: absolute;
    content: '';
    top: 0;
    left: 5px;
    right: 5px;
    height: 100%;
    background:url(http://placehold.it/200/) no-repeat center;
    background-size: cover;
}

＆＃13;

<div class="submenuButton"></div>

＆＃13;

将背景图像设置为css中的div，在左侧和右侧留下偏移量

2 个答案: