相关疑难解决方法(0)

是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明？

我想在不将文本和背景作为两个单独元素的情况下实现此目的.

尝试时:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.

使用web-tiki的响应方形网格布局我已经制作了一些带有背景图像和文本的响应方块,如下所示:

HTML:

<div class="square bg imgautumn1">
   <div class="content">
        <div class="table">
            <div class="table-cell months">
                VISIBLE TEXT
            </div>
        </div>
    </div>
</div>

CSS:

.square {
    float: left;
    position: relative;
    margin: 0.25%;
    width: 50%;
    padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
    overflow: hidden;
}
.content {
    position: absolute;
    height: 90%; /* = 100% - 2*5% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 5%;
}
.table {
    display: table;
    width: 100%; …

除了HEX(#ffffff)之外的任何值都会产生控制台错误.但我想知道用户是否想要没有颜色和透明.

我知道以下语法无论如何都不会起作用.但有没有办法可以实现透明的价值.

<input type='color' value='transparent'/>

我不知道如何使background-image不透明度为 0.5 和内容完全不透明度。

.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(../images/about.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.3;
}

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>