【问题标题】:Making an opacity text-gradient over a transparent background在透明背景上制作不透明文本渐变
【发布时间】:2011-07-26 19:07:53
【问题描述】:

它应该看起来像http://img190.imageshack.us/img190/1686/textgradient.jpg
棘手的部分是,它应该适用于歌剧,画布......?同样重要的是:只有屏幕截图中的大文本才需要透明度。

文本是 span 标签中的简单 html 文本。背景是一个有点透明的 png,定义为容器 div 的 css background-image。

我使用画布或类似的东西来显示文本没有问题。

【问题讨论】:

  • 您能向我们展示您到目前为止的工作吗?
  • 你能提供更多细节吗? - 这是图像还是可编辑文本?
  • 对于这些小细节很抱歉,我已经编辑了我的问题

标签: css html opacity gradient


【解决方案1】:

如果只有Cufón 支持“开箱即用”的水平线性渐变,那么您将得到一个简单的<canvas> 解决方案。有趣的是,cufon supporting a horizontal linear gradient 上的对话在过去 24 小时内才刚刚开始。下面的演示使用rgba 演示了具有垂直线性渐变的 Cufón。

演示:jsfiddle.net/Marcel/35PXy (fullscreen)

【讨论】:

    【解决方案2】:

    嗯,这是漫长的一天,我自己找到了解决方案。 它使用画布。

    对于 html 高度 73px 和宽度 720px 的画布:

    var ctx = myCanvasEl.getContext("2d");
    ctx.font = "53pt Arial, Helvetica, sans-serif";
    var gradient = ctx.createLinearGradient(400, 0, 650, 0);
    gradient.addColorStop(0, "rgb(255,255,255)");
    gradient.addColorStop(1, "rgba(255,255,255,0)");
    ctx.fillStyle = gradient;
    ctx.fillText(myText, 0, 58);
    

    【讨论】:

      【解决方案3】:

      我能想到的最简单的方法是创建背景图像的副本,进入 Photoshop 并创建一个基本透明的渐变。然后在文本上叠加渐变。我相信这适用于所有浏览器。

      【讨论】:

      • 这种方法的问题是,原始背景图像已经是透明的。结果是,文本不能比背景更透明
      【解决方案4】:

      你不再需要画布了。使用属性background-clip: text 结合带有rgba 的渐变背景(alpha 通道到完全透明)。

      这里是一个例子: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html

      很好,但目前只能在 webkit 浏览器中使用。

      对于更兼容的解决方案,您可以查看mask-image http://trentwalton.com/2011/05/19/mask-image-text/ 与第一种方法类似,您应该将遮罩淡化为全透明以获得您想要实现的效果。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-12-02
        • 2015-06-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多