Question

我想将渐变背景应用于文本。我指的是实际文本，而不是文本显示的背景。因此，如果渐变是红色到白色而文本只是字母T，则T将用红色填充为白色。

我发现了一些允许这样做的代码并且运行良好。问题是文本只能与渐变一样宽。因此，如果渐变为90像素宽，则输入的文本为10个字符，使用的字体的字符宽度为8像素，全文将显示渐变背景。但是，如果文本增加到11个字符，则超出了图像的大小，因此并非全部显示。

我尝试使用imagecopyresampled函数创建一个具有我需要的宽度的新图像。它会创建图像但不均匀 - 原始图案中没有黑点。另外，如果文本由大量字符组成，则结果图像非常大并且需要很长时间才能创建。

我能想到的另一种方法是创建渐变图像的大型副本并使用它们。这是有效的，但新图像必须足够大，以适应所有可能的文本条目。我确实尝试过使用background-repeat，这种方法很有用。但重复之间有空格。

我正在使用的代码如下。有人能看到更好的方法吗？

    <style>.grads {                     
     display:block; 
     -webkit-text-fill-color: transparent;
     background: -webkit-linear-gradient(transparent, transparent),
     url(newimg.jpg) no-repeat; 
     background: -o-linear-gradient(transparent, transparent);
     -webkit-background-clip: text;  
    } 
    </style> 

    $filename = 'gold.jpg';
    $percent = 100;

    // Get new dimensions
    list($width, $height) = getimagesize($filename);
    $new_width = $width * $percent;
    $new_height = $height * $percent;

    // Resample
    $image_p = imagecreatetruecolor($new_width, $new_height);
    $image = imagecreatefromjpeg($filename);
    imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

    // Output
    imagejpeg($image_p, 'newimg.jpg');

    <div><div class="grads">
      <span>Hellow</span>
    </div>

将渐变添加到不同大小的文本颜色

0 个答案: