文字叠加不透明度

时间:2017-07-26 18:24:07

标签: html css css3

我试图在css中对图像进行叠加,但我遇到了一些我不知道如何解决的问题。 看看这张图片,这是PhotoShop中的一个模型:

enter image description here

但我得到了这个:

enter image description here

正如你所看到的那样,blockquote和text也有不透明度,这是我真正需要解决的唯一问题(模糊不是必需的,但是会欣赏一个很好的例子)

我还创建了一个codepen,其他图像,相同的代码



img.header {
  width: 100%;
}

div.wrapper {
  position: relative;
  /* important(so we can absolutely position the description div */
}

div.description {
  height: 100%;
  position: absolute;
  /* absolute position (so we can position it where we want)*/
  bottom: 0px;
  /* position will be on bottom */
  left: 50%;
  width: 50%;
  /* styling bellow */
  background-color: #cddc39;
  color: white;
  opacity: 0.4;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
}

p.description_content {
  padding: 10px;
  margin: 0px;
  font-size: 30px;
}

<div id="praktijk" class="col s12">
  <div class="row pad-top">
    <div>
      <div class='wrapper'>
        <!-- image -->
        <img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
    ' />
        <!-- description div -->
        <div class='description'>
          <!-- description content -->
          <p class='description_content'>
            <blockquote>
              This is an example quotation that uses the blockquote tag.
            </blockquote>
          </p>
          <!-- end description content -->
        </div>
        <!-- end description div -->
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

如果您只想将不透明度应用于背景,在这种情况下只是背景颜色,我更喜欢rgba颜色。 请参阅:css color https://www.w3schools.com/cssref/css_colors_legal.asp

要应用此属性,您必须将颜色从十六进制转换为rgb颜色

此处页面为:https://www.webpagefx.com/web-design/hex-to-rgb/

所以你的包装类就是这样:

if a>threshold and a>b and a>c and a>d and a>e:
   print ('a is highest and within limit')
   CF=a

答案 1 :(得分:0)

&#13;
&#13;
img.header { width: 100%;}
div.wrapper { 
   position: relative;
   overflow:hidden;
   
}
div#imageBlur, div.description {
   height: 100%;
   position: absolute;
   left: 50%;
   width: 50%;

}
div#imageBlur {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 8px;
    background-position-x: 100%;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    bottom: 8px;
}
div.description {
   bottom: 4px;
    background-color:rgba(205, 207, 57, 0.4) ;
    color: white;
}
p.description_content {font-size: 50px;}
blockquote{
    border-left:solid 2px #ffd800;
    padding-left:5px;
    font-size: 25px;
}
&#13;
<div id="praktijk" class="col s12">
        <div class="row pad-top">
            <div>
                <div class='wrapper'>
                    <img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
                    <!-- description div -->
                    <div id="imageBlur" style="background-image: url(https://www.w3schools.com/w3images/fjords.jpg);"></div>
                    <div class='description'>
                        <p class='description_content'>
                            <blockquote>
                                This is an example quotation that uses the blockquote tag.
                            </blockquote>
                        </p>
                    </div>

                </div>
            </div>
        </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

法哈德·巴格罗(Sir Farhad Bagherlo)先生选对了。只需将叠加层的背景色更改为所需颜色和色调的rgb / rgba,然后消除不透明度即可。这使它变得容易。 以下是您可以使用的颜色列表:https://www.december.com/html/spec/colorrgbadec.html

答案 3 :(得分:-1)

哦,对不起,我没看到模糊元素 如果您只想使背景模糊,则不得将文字放在背景中。取而代之的是2 div:

首先将div作为背景并过滤模糊,然后设置位置:绝对,完全宽度和高度。别忘了将 position:relative 设置为父级;

第二个div作为文本

我希望这会有所帮助