gpt4 book ai didi

php - 图像上的 CSS 黑色渐变

转载 作者:太空宇宙 更新时间:2023-11-04 12:18:48 25 4
gpt4 key购买 nike

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

它基于 wordpress 主题。

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

有什么想法吗?谢谢。

最佳答案

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

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

关于php - 图像上的 CSS 黑色渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28507654/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com