圖片上的CSS黑色漸變

Question

請看這張截圖。 這是我博客中帖子的頭部。 看到標題圖像被黑色漸變覆蓋。 我使用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; } 

有任何想法嗎？ 謝謝。

Answer 1

不幸的是，尚無跨瀏覽器支持進行漸變蒙版。 這是一個可以回答此問題的問題： 使用CSS，您可以應用漸變蒙版來淡化文本上方的背景嗎？

我建議創建一個透明度從100％到0％且與圖像大小相同的透明PNG並將其覆蓋。 否則，請堅持您所擁有的。