[WordPress] CSS のイメージの上のグラデーションをブラックします。

スポンサーリンク

質問

このスクリーン ショットを参照してください。それは私のブログの記事の頭の部分です。ヘッダー画像は黒のグラデーションで覆われていることを参照してください。作成する CSS でそれを行う方法を知らないので、Photoshop を使用して

ワードプレス テーマに基づきます

enter image description here

ここでは、コード:

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

任意のアイデアですか?ありがとう

答え

残念ながら、まだグラデーション マスクを行うためのブラウザー間のサポートはありません。ここではこれに答える問題: CSS を使用してテキストの上に背景に衰退するグラデーション マスクを適用することができますか?

イメージと同じサイズである 0% に 100 % の不透明度の勾配で透明な PNG を作成し、それを重ね合わせる提案するでしょう。それ以外の場合は、ちょうどあなたが持っているものに固執します

http://stackoverflow.com/questions/28507654/css-black-gradient-over-image

スポンサーリンク

Leave a Reply