作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在创建 css3 文本渐变。它们在浏览器中完美运行,但当您在网络上查看它们时。文本周围总是有一条线或一个框。类似于此页面上发生的情况:http://www.paulund.co.uk/playground/demo/css_text_gradient/
这是 webkit 错误吗?
最佳答案
感谢 Michael 的建议,在生成的 css3 上使用 svg bg 解决了移动问题。
这是 css 的代码:
background:url(../img/grad.svg) 0 -116px;
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
然后是 grad.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60">
<linearGradient id="normal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="60" fill="url(#normal)" />
</svg>
关于css - 创建文本渐变时移动设备上出现奇怪的渐变出血,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13040239/
我是一名优秀的程序员,十分优秀!