css

Question

如何编辑我的 CSS 以调整英雄单元中背景图像的不透明度，而不影响英雄单元中文本等的不透明度？这是草稿网站（是的，我会为照片的正确版本付费）：网站

score 2 · Accepted Answer

2

简单的答案是获取您的 .jpg，并使用它创建一个已应用不透明度的 .png。

于 2013-05-23T19:37:59.197 回答

score 0 · Accepted Answer

一种方法是将您的英雄文本移到英雄单位之外，然后将position:relative其放置在您想要的位置...

.hero-unit {
  background-image:url('..');
  height:300px;
  opacity: .5;
}

h1 {
  position: relative;
  top: -350px;
  left: 40px;
  color:#fff;
}

HTML

<div class="container">
  <div class="hero-unit">
  </div>
  <h1>Hello Hero Text</h1>  
</div>

此示例假设您的英雄文本包含在 H1 中，但它可以位于英雄之外的任何容器中。