Question

我正在使用bootstrap和HTML5开发网站。我有一个网站标题。我希望在网站标题中有一个图像，其中包含一些不透明度值以及其中的一些文本。我已经提到了这个链接setting opacity for background image并尝试实施它。我有文字而不是图片。

以下是代码：

HTML：

<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>

CSS：

.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}

.head .hbg
{
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
z-index: -1;
}

这里有什么问题？

Answer 1

.head .bg在上面的代码中不存在。改为.hbg。

Answer 2

相反怎么样？

<div class="page-header head">
Hi there
</div>

-

.head{
  width: 300px;
  height: 250px;
  display: block;
  position: relative;
}

.head::after {
  content: "";
  background: url(hbg.png);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 3

你需要添加位置：绝对;顶部：0;左：0;到.hbg和宽度和高度100％所以它遍布父容器：）

.head {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  height: 170px;
}
.head .hbg {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('http://gillespaquette.ca/images/stack-icon.png');
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
  width: 100%;
  height: 100%;
}

<div class="page-header head">
  <div class="hbg"></div>
  Hi there
</div>

使用css中的url设置背景图像的不透明度

3 个答案: