css 一个固定的背景图片可以在Firefox中滚动吗？

lhcgjxsq 于 12个月前发布在其他

关注(0)|答案(1)|浏览(76)

在所有现代浏览器中，background-clip: text样式会导致背景被裁剪为元素中文本的形状（MDN）。滚动渲染结果，背景裁剪的文本将与页面上的其他内容一起沿着移动：

h1 {
  -webkit-background-clip: text; /* chrome, opera */
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent; /* let the background be visible through otherwise opaque text */
}

/* make it easier to see scrolling and clip effect */
body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

个字符
但是，如果我添加background-attachment: fixed，文本将停止滚动 * 仅在Firefox中 *：

h1 {
  background-attachment: fixed; /* <-- added */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent;
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

<h1>The quick brown fox</h1>
<p>Regular, un-clipped text for reference.</p>

的字符串
我能做些什么来让文本在Firefox中随着滚动条移动吗？这是Firefox的bug吗？

css

来源：https://stackoverflow.com/questions/76823810/can-a-fixed-background-image-thats-clipped-to-text-scroll-in-firefox

1条答案

按热度按时间

vqlkdk9b1#

你可以使用一个inline SVG和一个mask来达到同样的效果。然而，你必须摆弄SVG的尺寸或者使用JavaScript来获得一个适用于不断变化的文本的解决方案（例如在模板中使用）。也许有人可以帮助你把它变成一个可以在模板中使用的解决方案。
范例：

.text-with-pic-bg {
  margin:0 auto;
  width: 80vw;
  height:50vh;
  padding: 10rem 0;
  background-image: url(https://picsum.photos/id/210/1920/1280);
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mask-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='284px' width='1683.03px'><text y='221' style='font-family:Arial;font-weight:900;font-size:200px;'>HELLO WORLD!</text></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='284px' width='1683.03px'><text y='221' style='font-family:Arial;font-weight:900;font-size:200px;'>HELLO WORLD!</text></svg>");
  mask-size: 80vw;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 80vw;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
/* some general styling */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #ccc;
}

.some-height {
  min-height: 75vh;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

css 一个固定的背景图片可以在Firefox中滚动吗？

1条答案

相关问题

热门标签

最新问答