Question

我正在尝试将一个衣衫褴褛的寄宿生添加到羊皮纸背景中。这是我的CSS

#wrap
{
    width:52em;
    margin:30px auto; /* centers the container */
    background-image: url(../images/parchment.gif);
}
.borderimage #wrap
{
    border-width: 10px;
    -chrome-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -moz-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -o-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -webkit-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
}

.borderimage类是modernizr的一部分。

渲染时，背景图像覆盖了边界图像。如果我将背景图像设置为无，我会在边框处看到边框图像。几年前我有这个工作，但它不久前失败了。如果是因为我所做的更改或浏览器升级，我不会这样做。网络搜索没有发现任何有用的东西。

Answer 1

尝试将background-size: contain;置于#wrap

之内

如何防止覆盖边框图像的背景图像

1 个答案: