不带背景色，但不带文字\[重复\]

CSS

理查德Near小宇宙

2020-03-20

div在文本保持不透明的同时，如何使跨浏览器（包括Internet Explorer 6）的背景透明？

我需要在不使用jQuery等任何库的情况下进行此操作。（但是，如果您知道这样做的库，我很想知道，所以我可以看看他们的代码）。

第2424篇《不带背景色，但不带文字\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小胖Itachi 2020.03.20

放宽对在IE6和旧版浏览器上工作的要求，可以使用:: before并显示：inline-block

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

演示在http://jsfiddle.net/KVyFH/172/

它可以在任何现代浏览器上使用

JinJin乐 2020.03.20

我已经在我的博客Landman Code上创建了这种效果。

我所做的是

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}
<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

重要的是，.Background和.Foreground中的每个填充/边距和内容都必须相同。

斯丁逆天A 2020.03.20

感谢@ davy-landmann提供https://stackoverflow.com/a/638064/417153。那就是我想要的！与LESS代码相同的效果：

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android