图像上的 CSS 黑色渐变答案

【问题标题】：CSS black gradient over image图像上的 CSS 黑色渐变
【发布时间】：2015-04-14 23:17:23
【问题描述】：

请看一下这个截图。这是我博客中帖子的开头部分。看到标题图像被黑色渐变覆盖。我使用 Photoshop 创建了它，因为我不知道如何在 CSS 上进行。

它基于 wordpress 主题。

代码如下：

HTML/PHP

<?php if (has_post_thumbnail( $post->ID ) ): ?>
  <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    <div class="post-title-container" style="background: url('<?php echo $image[0]; ?>') no-repeat center center;">
      <?php
        if ( is_single() ) :
          the_title( '<h1 class="post-title-text">', '</h1>' );
        else :
          the_title( sprintf( '<h2 class="post-title-text"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
        endif;
      ?>
    </div>
<?php endif; ?>

CSS

.post-title-container {
	position: relative;
	width: 100%;
	height: 300px;
	opacity: 1;
	box-shadow: none;
	background-size: 100% auto;
}

.post-title-text {
	color: #FFF !important;
	margin-bottom: 0;
	padding: 18% 10% 0% 10%;
	width: 80%;
	z-index: 1;
	line-height: 1.2;
	position: absolute;
	font-size: 4.14286rem;
}

.post-title-text > a {
	color: #FFF !important;
}

.post-title-text > a:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}

有什么想法吗？谢谢。

【问题讨论】：

你忘了问问题。
试试这个链接它会帮助你stackoverflow.com/questions/16589519/…

标签： php html css wordpress wordpress-theming

【解决方案1】：

不幸的是，目前还没有跨浏览器支持做渐变蒙版。这是一个回答这个问题的问题：Using CSS, can you apply a gradient mask to fade to the background over text?

我建议创建一个透明的 PNG，其不透明度从 100% 到 0%，与图像大小相同，然后将其覆盖。否则，请坚持你所拥有的。

【讨论】：