0

我正在创建一个博客，在博客的顶部是一些场景的图像（我使用了纽约市的图片），其顶部是最新博客文章的文本。我认为让字母有轮廓真的很酷，但仍然可以是透明的，因此观众仍然可以看到图像。

我尝试了透明颜色的文本阴影，但我得到的只是一个黑色字母（我没想到但有道理）。我最终使用了 webkit-text-stroke 属性，它根本不是跨浏览器。我在 Chrome 和 Firefox 中都附上了它的图像，后面有一个文本阴影，所以你可以看到没有颜色的文本阴影是如何出现的（有点）。

有没有办法在现代浏览器中获得所需的效果（文本周围有边框，但没有颜色）？对于 IE9 及以下版本，我将只使用纯黑色。

这是我用来获得以下效果的代码：

figcaption { 
    position: absolute; 
    bottom: 0px; 
    left: 20px; 
    font-size: 90px; 
    color: transparent;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #1F1F1F; 
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);}

谢谢你。

在此处输入图像描述

在此处输入图像描述

4

2 回答 2

0

几个想法。

这个例子不完全是你所描述的，但结果很好，应该可以跨浏览器运行良好：http:
//jsfiddle.net/panchroma/JHvgp/

关键的 CSS 是

h1.figcaption { 
color:white;
position: absolute; 
bottom: 0px; 
left: 20px; 
font-size: 90px; 
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}

或者，也许可以用sIFR做一些事情……虽然不确定。

祝你好运！

编辑

Adrien Be下面的好建议——改进了跨浏览器透明度代码：
http ://css-tricks.com/snippets/css/cross-browser-opacity/

于 2013-05-26T12:03:01.907 回答
0

[我这里没有真正的现成解决方案；但是我对此的想法太长了，无法发表评论，所以请原谅我把它放在这里。]

跨浏览器有点难实现。我也研究了获得这种效果的方法（并且对仅使用 webkit 不满意），我想出了一些东西，比如使用动态创建的 Canvas 或 SVG 图像来绘制文本和然后操作 alpha 值（画布）或应用蒙版/滤镜效果（SVG）。

但是要使字体渲染/定位完全正确是一个挑战，当文本必须跨越多行时，它会变得更加复杂。我找到的最好方法是将文本分成多个span元素，每个单词一个；然后我放置一个仅包含该单词的 Canvas 或 SVG 图像作为 span 元素的背景图像。这里有很大的优势：浏览器仍然处理文本流，比如在哪里将文本分成新行等，因为在 Canvas 或 SVG 中实现自己有点麻烦。如果文本显示的区域大小发生变化（用户调整浏览器窗口大小），文本流也会自动适应。需要特别注意的是在应用效果后处理文本大小调整 - 当用户在浏览器中更改字体大小时，我在图像上绘制的文本可能不再适合 - 尽管使用可以非常自动处理的 SVG 和相关单位也是。其他解决方法要么使用background-size将背景图像缩放到包含单词的范围的大小，或者以某种方式捕获调整大小的“事件”并动态重新绘制图像。

使用背景图像的优点是我仍然可以保留原始 HTML 文本——只需将其设置为transparent，这样当用户 fe 开始在页面上选择文本时，它仍将显示为实际文本并且可以复制和粘贴。

但是对于像这样的小效果，需要做很多工作......所以我最终决定放弃它，并推迟使用“透明字母”，直到浏览器支持更简单的解决方案，比如你提到的 webkit 解决方案变得更广泛。

于 2013-05-26T10:52:00.850 回答