Please take a look at this screenshot. It's the head part of the posts in my blog. See that the header image is covered by a black gradient. I created that using Photoshop because I don't know how to do it on CSS.
It's based on a wordpress theme.
Here's the code:
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; }
Any ideas? Thanks.
Unfortunately, there is no cross-browser support for doing a gradient mask yet. Here is a question that answers this: Using CSS, can you apply a gradient mask to fade to the background over text?
I would suggest creating a transparent PNG with a gradient of opacity from 100% to 0% that is the same size as the image and overlaying it. Otherwise, just stick to what you've got.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.