带图像的子div从父级继承不透明度

时间:2016-12-12 19:12:20

标签: javascript jquery html css

  • 我有一个带背景图片的div。
  • 我对背景图片应用不透明度
  • 我创建了一个子div并添加了文本
  • 我不希望子div继承父div的不透明度属性

这是我的小提琴示例: 小提琴。 net / zs4pbmu2 / 1 /

我不想在我的文本后面放置背景颜色,就像在这个示例/伪解决方案中一样: 小提琴。 net / Bbw7r / 5 /

请帮助!

2 个答案:

答案 0 :(得分:0)

你能改变你的HTML结构:

<div id="alpha_wrapper">
  <div id="alpha_2">
  </div>
  <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
</div>

Demo

答案 1 :(得分:0)

你有几个选择:

如果背景为白色:

    图像顶部渐变中使用的
  • Preferences颜色

&#13;
&#13;
getSupportActionBar()
&#13;
rgba(255,255,255,0.3)
&#13;
&#13;
&#13;

  • #alpha_wrapper { width: 540px; height: 360px; float: left; position: relative; color: #fff; } #alpha_2 { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat 0 0; width: 540px; height: 440px; } #text_holder_2 { color: red; font-weight: bold; font-size: 28pt; position: absolute; top: 20px; left: 20px; width: 500px; }颜色用作插入阴影:

&#13;
&#13;
<div id="alpha_wrapper">
  <div id="alpha_2">
    <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
  </div>
</div>
&#13;
rgba(255,255,255,0)
&#13;
&#13;
&#13;

如果背景不是白色,但有主色或纯色,您可以查看:http://codepen.io/gc-nomade/pen/wouBe以获取更多示例。

否则,您可以将图像转换为png并将透明度添加到图像本身而不是在CSS上进行中继