2

我正在尝试将图像设置为主体 DIV 的背景。

图像需要缩放以适应 div 并垂直和水平居中。溢出可以隐藏在各个方面。

在 div 内，需要有一个 25px 的边距，然后内部 div 有一个不透明度为 0.2 的背景颜色。

在该 div 中是发布文章的组件区域，同样，所有边都有 25px 的填充。

您可以在这里看到我遇到的问题：http: //betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet

在此页面上，文章是一个手风琴，当它展开时，背景图像不会缩放以填充空间并且有空白。

此外，在此页面上：http: //betelec.ergoomiq.net/societe/charte

默认文章长度比图像高度长，因此背景再次不会缩放以填充 div 并且创建了空白。

我可以更改图像并放置一个更大的图像，该图像可以根据需要缩小以填充可用空间。但是，图像不能平铺。

最后，内部 div 超出了容器 div，因此内容在右侧被截断。

在我的 style.less 中，我有以下代码：

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        #rt-main [class*="grid"] {
            & > div.rt-block {
                background-image: url(../images/backgrounds/blur.jpg);
                background-size: cover;
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 25px !important;
                // padding-bottom: 0;
                // margin-bottom: 0;
                & > div#rt-mainbody {
                    background: rgba(0, 168, 143, 0.2) !important;
                    overflow: hidden;
                    color: @white;
                    article.item-page {
                        padding: 25px;
                    }
                }
            }
        }
    }
}

至于填充，问题在下面的两个屏幕截图中清晰可见。

正如你所看到的，从背景边缘（与绿色相交的地方）到内部 div 有 25px 的填充，该内部 div 的背景颜色为 ，并且article.item-pagebackground: rgba(0, 168, 143, 0.2) !important;上还有 25px 的填充。这些由我覆盖在屏幕截图上的小黄线表示。但是，相同的填充在 div 的右侧不起作用，并且内容与 div 碰撞。

div 右边缘缺少填充

这里也一样

布局应该看起来像这个模型。

小样

4

1 回答 1

2

嗯，解决了这个问题：

我将 less 更改为：

body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        div#rt-main {  // removed " [class*="grid"] "
            & > div.rt-container [class*="rt-grid"] {  //added this new selector level with the portion of code removed from previous line
                & > div.rt-block {
                    background-image: url(../images/backgrounds/blur.jpg);
                    background-size: cover;
                    position: relative;
                    background-position: center;
                    background-repeat: no-repeat;
                    height: 100%;
                    width: auto;
                    overflow: hidden;
                    margin: 0;
                    padding: 25px !important;
                    // padding-bottom: 0;
                    // margin-bottom: 0;
                    & > div#rt-mainbody {
                        background: rgba(0, 168, 143, 0.2) !important;
                        overflow: hidden;
                        color: @white;
                        article.item-page {
                            padding: 25px;
                        }
                    }
                }
            }
        }
    }
}
于 2013-03-06T20:50:37.357 回答