论坛 › 上海 › CSS 实现文字颜色渐变的 3 种办法

wrjc1hod 发表于 2024-6-30 08:15:05

CSS 实现文字颜色渐变的 3 种办法

    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-d1dde0c393bcb5278b86467cdafaa1a8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">近期</span><span style="color: black;">博主</span>的老大弥雅在<span style="color: black;">研发</span>自<span style="color: black;">运用</span>的 wordpress 主题的时候，打算部分元素中文字采用 CSS 实现颜色渐变。在查阅<span style="color: black;">有些</span>资料和求助<span style="color: black;">有些</span>前端大佬后总结出比较实用的三个<span style="color: black;">办法</span>，<span style="color: black;">此刻</span><span style="color: black;">博主</span>就分享给<span style="color: black;">大众</span>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;">bac<span style="color: black;">公斤</span>round-image: -webkit-linear-gradient(...) 为文本元素<span style="color: black;">供给</span>渐变背景。
      -webkit-text-fill-color: transparent <span style="color: black;">运用</span>透明颜色填充文本。
      -webkit-bac<span style="color: black;">公斤</span>round-clip: text 用文本剪辑背景，用渐变背景<span style="color: black;">做为</span>颜色填充文本。
      缺点：webkit 内核浏览器特有</div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-6947de57acd78bcd842f016978446e09_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>渐变色<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>
      <span style="color: black;">text-align</span><span style="color: black;">:</span> <span style="color: black;">left</span><span style="color: black;">;</span>
      <span style="color: black;">text-indent</span><span style="color: black;">:</span><span style="color: black;">30</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">40</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">font-weight</span><span style="color: black;">:</span> <span style="color: black;">bolder</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-image</span><span style="color: black;">:</span> <span style="color: black;">-webkit-</span><span style="color: black;">linear-gradient</span><span style="color: black;">(</span><span style="color: black;">bottom</span><span style="color: black;">,</span> <span style="color: black;">red</span><span style="color: black;">,</span> <span style="color: black;">#fd8403</span><span style="color: black;">,</span> <span style="color: black;">yellow</span><span style="color: black;">);</span>
      <span style="color: black;">-webkit-</span><span style="color: black;">bac<span style="color: black;">公斤</span>round-clip</span><span style="color: black;">:</span> <span style="color: black;">text</span><span style="color: black;">;</span>
      <span style="color: black;">-webkit-</span><span style="color: black;">text-fill-color</span><span style="color: black;">:</span> <span style="color: black;">transparent</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      Hello World ~
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-e5f342901a9215968b95ced7cfd6520d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>：mask-image</p>缺点：webkit 内核浏览器特有
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>渐变色<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</span> <span style="color: black;">{</span> <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span> <span style="color: black;">text-align</span><span style="color: black;">:</span> <span style="color: black;">left</span><span style="color: black;">;</span>
      <span style="color: black;">text-indent</span><span style="color: black;">:</span><span style="color: black;">30</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">px</span><span style="color: black;">;</span> <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">40</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">font-weight</span><span style="color: black;">:</span> <span style="color: black;">bolder</span><span style="color: black;">;</span>
      <span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">-webkit-</span><span style="color: black;">mask-image</span><span style="color: black;">:</span> <span style="color: black;">-webkit-</span><span style="color: black;">gradient</span><span style="color: black;">(</span><span style="color: black;">linear</span><span style="color: black;">,</span> <span style="color: black;">0</span> <span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">0</span> <span style="color: black;">bottom</span><span style="color: black;">,</span> <span style="color: black;">from</span><span style="color: black;">(</span><span style="color: black;">yellow</span><span style="color: black;">),</span> <span style="color: black;">to</span><span style="color: black;">(</span><span style="color: black;">rgba</span><span style="color: black;">(</span><span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">0</span><span style="color: black;">,</span> <span style="color: black;">255</span><span style="color: black;">,</span> <span style="color: black;">0</span><span style="color: black;">)));</span> <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span><span style="color: black;">&gt;</span> Hello World ~ <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>三</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-922bfcc8df30680e69b42dbeeac9e3e9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">采用 svg 方式</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>渐变色<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box-text</span> <span style="color: black;">{</span> <span style="color: black;">fill</span><span style="color: black;">:</span> <span style="color: black;">url</span><span style="color: black;">(</span><span style="color: black;">#SVGID_1_</span><span style="color: black;">);</span>
      <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">40</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">font-weight</span><span style="color: black;">:</span> <span style="color: black;">bolder</span><span style="color: black;">;</span> <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">svg</span> <span style="color: black;">viewBoxs</span><span style="color: black;">=</span><span style="color: black;">"0 0 500 300"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">defs</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">linearGradient</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"SVGID_1_"</span> <span style="color: black;">gradientUnits</span><span style="color: black;">=</span><span style="color: black;">"userSpaceOnUse"</span> <span style="color: black;">x1</span><span style="color: black;">=</span><span style="color: black;">"0"</span> <span style="color: black;">y1</span><span style="color: black;">=</span><span style="color: black;">"10"</span> <span style="color: black;">x2</span><span style="color: black;">=</span><span style="color: black;">"0"</span> <span style="color: black;">y2</span><span style="color: black;">=</span><span style="color: black;">"50"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">stop</span> <span style="color: black;">offset</span><span style="color: black;">=</span><span style="color: black;">"0"</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"stop-color: yellow"</span><span style="color: black;">/&gt;</span> <span style="color: black;">&lt;</span><span style="color: black;">stop</span> <span style="color: black;">offset</span><span style="color: black;">=</span><span style="color: black;">"0.5"</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"stop-color: #fd8403"</span><span style="color: black;">/&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">stop</span> <span style="color: black;">offset</span><span style="color: black;">=</span><span style="color: black;">"1"</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"stop-color: red"</span><span style="color: black;">/&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">linearGradient</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">defs</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">text</span> <span style="color: black;">text-anchor</span><span style="color: black;">=</span><span style="color: black;">"middle"</span> <span style="color: black;">x</span><span style="color: black;">=</span><span style="color: black;">"110px"</span> <span style="color: black;">y</span><span style="color: black;">=</span><span style="color: black;">"30%"</span><span style="color: black;">&gt;</span>盖世神功<span style="color: black;">&lt;/</span><span style="color: black;">text</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">svg</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">
            <div style="color: black; text-align: left; margin-bottom: 10px;">
                <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/v2-45cb54a129df0d42c70fb708730e63d2.jpg?source=6a64a727" style="width: 50%; margin-bottom: 20px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">宣传</span></div>
                  </div>
                </div>
                <div style="color: black; text-align: left; margin-bottom: 10px;">
                  <div style="color: black; text-align: left; margin-bottom: 10px;">罗技k580+鹅卵石鼠标小刘鸭联名键鼠套装 摸鱼系列 套</div>
                  <div style="color: black; text-align: left; margin-bottom: 10px;">知乎</div>
                  <div style="color: black; text-align: left; margin-bottom: 10px;">
                        <div style="color: black; text-align: left; margin-bottom: 10px;">
                            <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">¥355.00</span></div>
                        </div>
                        <div style="color: black; text-align: left; margin-bottom: 10px;">去购买<span style="color: black;">​</span></div>
                  </div>
                </div>
            </div>
      </a></div>

ZLrj123 发表于 2024-9-1 19:49:42

请问、你好、求解、谁知道等。

4zhvml8 发表于 2024-11-3 03:45:27

对于这个问题，我有不同的看法...

4zhvml8 发表于 6 天前

同意、说得对、没错、我也是这么想的等。

查看完整版本: CSS 实现文字颜色渐变的 3 种办法