时间戳

首页 > 解决方案 > 如何设置带有渐变边框和透明背景的文字笔划

html - 如何设置带有渐变边框和透明背景的文字笔划

问题描述

我有一个PSD设计，其中有一个用渐变笔触和透明背景编写的文本。在设计这个时，CSS我无法设置透明背景的笔触。

我现在将它管理为白色透明且不透明。但是通过这个，当它出现在图像上时，文本就不那么明显了。请参阅文本所在的实时站点CREATIVE第 2 节。与 PSD 相比，字符“C”和“R”不太明显。

PSD网址：https ://www.photopea.com/#iybHFezVy

body{background:#ccc}
.agency-banner .wrapper .col-left {
    width: 555px;
}

.heading h1, .heading h2 {
    font-size: 150px;
    line-height: 1em;
    font-family: prompt-bold;
    text-transform: uppercase;
    /*background: -webkit-linear-gradient(45deg,#ed3b4b,#4c3b92 90%);*/
    background: linear-gradient(90deg, rgba(237,59,75,1) 0%, rgba(76,59,145,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 4px transparent;
    color: #fff;
    opacity: .6;
    position: relative;
    z-index: -1;
    letter-spacing: 15px;
    font-family: 'Prompt', sans-serif;
}
.agency-banner .wrapper .col-left .heading h1 {
    padding-left: 25px;
    display: inline;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<div class="agency-banner">
  <div class="container">
    <div class="wrapper d-flex">
      <div class="col-left">
        <div class="heading">
          <h1>Agency</h1>
      </div>      
    </div>
  </div>
</div>
</body>
</html>

欢迎任何建议。

标签： htmlcsssassgraphicspsd

解决方案

推荐阅读