创建半透明图像叠加答案

【问题标题】：Create semi-transparent Image Overlay创建半透明图像叠加
【发布时间】：2015-04-21 22:07:15
【问题描述】：

我正在创建一个单页 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>

【问题讨论】：

标签： html css wordpress image

【解决方案1】：

opacity: 0.5; 应该是您搜索的内容，0.0 是透明的，1.0 是可见的，所以 0.5 将是 50% 可见

【讨论】：

感谢您的回答。问题不在于不透明度。我正在寻找一种方法来显示我的图像。我已经添加了这个 css 代码，但我的图像不会出现。就像我输入一个高度值一样。但我希望图像能够响应并始终保持 100% 的浏览器宽度。背景图片：url（../images/separator-orange.png）；背景尺寸：100% 自动；背景重复：不重复；背景位置：左上角；位置：相对；
啊，那么我误解了你的问题，对不起，标题误导了我 x) 对于响应式设计，你只需要一个可变宽度，如果你希望高度随窗口宽度而变化，你可以轻松地使用媒体查询。另外，如果元素中的内容也是可见的吗？像文本一样，或者content: " " 也可以。

【解决方案2】：

请这样做

.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);
  }

&lt;div class="image-holder"&gt;&lt;img src="images/img02.jpg" height="371" width="556" alt="image description"&gt;&lt;/div&gt;

【讨论】：