设置不透明度的背景图像与网址在css

-1

我使用引导与HTML5一起开发一个网站。我有一个网站标题。我希望在网站标题中使用一些不透明度的图片，并在其中添加一些文字。我已经提到这个链接setting opacity for background image并尝试实施它。我有文字，但没有图像。设置不透明度的背景图像与网址在css

下面是代码：

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; 
}

什么是这里的问题？

来源

2014-10-17 xxx

“问题是什么吗？”那么，你应该告诉我们... – feeela 2014-10-17 15:32:51

您需要添加的位置是：绝对的; top：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>

来源

2014-10-17 15:46:59

这里宽度和高度的目的是什么？如果我删除它，图像消失。为什么？ – xxx 2014-10-17 15:53:26

您需要在.hbg上添加宽度和高度，以便填充其父容器。该图像只是.hbg的背景，并没有在宽度和高度上发挥作用，它会传播到它被添加为背景的元素有多大。:) – 2014-10-17 15:57:02

好了吧:) :) :) – xxx 2014-10-17 15:59:05

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

来源

2014-10-17 15:33:09 saZmer

我有改变了它。但仍然没有效果。 – xxx 2014-10-17 15:37:33

请查看我更新的代码 – xxx 2014-10-17 15:39:26

您正在查阅的文章使用 position：absolute; z-index：-1; top：0; bottom：0; left：0; right：0; 尝试添加.. – saZmer 2014-10-17 15:43:20

这是怎么回事？

<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; 
}

来源

2014-10-17 15:43:53

设置不透明度的背景图像与网址在css

回答

相关问题