标签: background-clip
使用背景剪辑时出现错误的滚动行为
background-clip: text当与 和-*-text-fill-color: transparent;一起使用时overflow: auto，Firefox 中的滚动不一致，并且在 Chrome（MacOS 都）上似乎根本不滚动。似乎存在渲染问题。
我尝试更改背景附件，添加变换（以触发 GPU），但似乎没有任何效果。
body {
background: #369;
color: #fff;
}
.wrap {
height: 50vh;
overflow: auto;
font: 26px / 1.5 sans-serif;
background-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
background-color: transparent;
background-clip: text;
-webkit-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}<div class="wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore …6
推荐指数
推荐指数
1
解决办法
解决办法
226
查看次数
查看次数
在 Safari 上使用“background-clip: text”时出现奇怪的线条
我正在尝试使用 CSS 制作渐变文本。目前它可以在 Chrome 和 Firefox 中使用，但在 Safari 上，我在边框外看到奇怪的线条。
我的 CSS 看起来像这样......
h1 {
font-family: "Work Sans", Helvetica, Arial, sans-serif;
}
.highlighted {
color: transparent;
background: linear-gradient(90deg, #FF008B, #FF006B);
background-clip: text;
-webkit-background-clip: text;
}
我的 HTML 只是一个简单的...
<h1>Welcome to <span class="highlighted">My site</span></h1>
但在 Safari 上却是这样的。
谁能帮我修复这些线路？
4
推荐指数
推荐指数
1
解决办法
解决办法
850
查看次数
查看次数