Question

我有一个网站，我在其中使用背景图像作为“下部”背景，然后在网站内容下方有透明的白色背景色。这就是我现在的编码方式：

HTML

<div class="wrapper">
 <div class="inner">
  <p>content</p>
 </div>
</div>

CSS

.wrapper {
 background-image: url(img/bg.png);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 height: 100%;
 width: 100%;
}

.inner {
 width: 40%;
 height: 100%;
 margin: auto;
 padding: 100px 7.5% 0 7.5%;
 background-color: rgba(255, 255, 255, .9);
}

这样做是为了获得完整的背景图像，其中内容居中且在其下具有白色背景，并具有不透明层。

我必须使用.inner（100像素）顶部的填充来在所有内容上方创建更多空间。如果我用空白来代替，则白色背景图像会从上方区域移除，而显示.wrapper的背景图像。用<br>进行操作并不是很好。所以我的问题是，这是做所有这些事情的一种好习惯，还是我应该采取另一种方法：

有背景图片和背景颜色吗？
使用填充在.inner内实现空白吗？

使用两个背景的最佳做法

0 个答案: