我正在尝试将图像设置为主体 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 碰撞。
布局应该看起来像这个模型。