Css背景图象不同在另外宽度

Question

我试图做的是有2个div，它们是同一个并排的，一个是宽的，一个是小的，但都有相同的背景图像。

问题在于我使用此代码：

.div {
    padding: 10px 0;
    font-weight: bold;
    margin-bottom: -40px;
    color: #fefefe;
    width: 100%;
    position: relative;
    background: url(/images/title_background.png);
    background-position: center;
    background-size: 100%;
}

结果是：

第一个div看起来不错，但第二个div看起来很好，如果我更改backgroud-size以填充第二个div，那么第一个看起来很紧张和奇怪。

是否有可能同时拥有2个不同类别的非常合适的背景图像？

Answer 1

您可以使用background-size: cover;将背景缩放到容器。

MDN是解决这类问题的绝佳资源。