废话不多说，先看效果

实现逻辑：

• 图片倒影使用mask-image属性给图片添加渐变蒙层
• 文字倒影使用background-image添加背景渐变，使用-webkit-text-fill-color和background-clip将背景颜色裁剪到文字上

代码如下：

<div class="logo-line">
  <img class="logo" src="https://lhost.oss-cn-chengdu.aliyuncs.com/blog/logo.png" />
  <span class="text">deepseek</span>
</div>
<div class="inverted-line">
  <img class="logo" src="https://lhost.oss-cn-chengdu.aliyuncs.com/blog/logo.png" />
  <span class="text">deepseek</span>
</div>
<style>
	body {
	  padding: 24px 60px;
	}
	.logo-line,.inverted-line {
	  display: flex;
	  align-items: center;
	}
	.logo {
	  margin-right: 4px;
	  width: 56px;
	  height: 41px;
	}
	.text {
	  color: #4D6BFE;
	  font-weight: bold;
	  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",Arial;
	  letter-spacing: 0.1rem;  
	  font-size: 2rem;
	}
	.inverted-line {
	  margin-top: 2px;
	}
	.inverted-line .logo {
	  transform: rotateX(180deg);
	  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 100%);
	}
	.inverted-line .text {
	  display: inline-block;
	  transform: rotateX(180deg);
	  background-image: -webkit-linear-gradient(bottom, #4D6BFE66 0%, #fff 100%);    
	  -webkit-text-fill-color: transparent;
	  -webkit-background-clip: text;  
	}
</style>

提示

mask-image具体使用见MDN-mask-image

文字渐变见我另一篇博文CSS效果-文字