创建半透明图像叠加

Question

我正在创建一个单页的WordPress主题。在每个部分中都有一个带有图像和叠加层的标题。

标题有背景，其中有一个包装宽度的图像。在其底部，有一个png-image，它是半透明的，应该是全宽的，覆盖了标题图像。

由于我为这些部分使用了不同的样式，我正在对它们进行编号，并且每个部分的叠加图像的颜色不同。所以我应该通过CSS插入它。

到目前为止，当我输入高度值时，我可以使叠加层可见。但由于页面需要响应，我希望高度可变，并且总是100％宽度。

我的代码：

<?php query_posts('post_type=page&order=ASC'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div id="content" class=" section-<?php echo $i++; ?>">
<h2 class="headline"><?php the_field('headline') ?></h2>
<div class="header">
    <div class="wrap cf">
        <?php
        if ( has_post_thumbnail() ) {
           the_post_thumbnail('bones-thumb-600');
           }
        else {

       }
        ?>
    </div>
    <div class="overlay"></div>
</div>    

<div id="inner-content" class="wrap cf">
    <div id="main" class="m-all">        
        <div class="stripes"></div>
            <!-- Thumbnail -->
            <a class="logo" href="#top"><img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" /></a>                    

            <div class="sidebar">
               <?php the_field('sidebar') ?>
            </div>

            <div class="main-content"><?php the_content(); ?></div>

            <img src="<?php echo get_template_directory_uri(); ?>/library/images/separator.svg"/>

    </div>
</div>

Answer 1

opacity: 0.5;应该是您搜索的内容，0.0是透明的，1.0是可见的，因此0.5将是50％可见

Answer 2

请这样做

＆＃13;

＆＃13;

.image-holder{
  height: 200px;
  width:200px;
  position: relative;
  }
.image-holder:after{
    content:'';
  position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: rgba(0,0,0,.3);
  }

＆＃13;

<div class="image-holder"><img src="images/img02.jpg" height="371" width="556" alt="image description"></div>

＆＃13;

＆＃13;

＆＃13;