CSS渐变实时刷新

a7qyws3x 于 2023-02-26 发布在其他

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

这是一个小挑剔，但如果它是可以避免的，我希望有人可能有一个解决方案。我有一个网页，我想使用css渐变的背景。这个网页有一个固定的标题在顶部的内容需要滚动后，但我想继续为标题的背景渐变。但当编码，如果我调整网页的大小，它不刷新梯度，并创建条带。
代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <style>
    body{padding: 0;margin:0;}
        
    .back{width:100vw;height:100vh;background: radial-gradient(ellipse,#fff  0%, #000 100%);overflow: hidden;position:fixed;top:0;left:0;z-index: -1}
        
    .top{width: 100vw;height: 11.5vw;background: radial-gradient(ellipse at 50% 50vh,#fff  0%, #000 100%); position: fixed;top: 0;left: 0;z-index: 10}
  </style>
</head>

<body>
  <div class="back"></div>
  <div class="top"></div>
</body>
</html>

并生成以下内容：Working gradient example
但是当我调整页面大小时，它会做这样的事情：broken gradient
在我刷新页面之前，它将保持损坏状态。为什么会发生这种情况，我如何修复它？

css

来源：https://stackoverflow.com/questions/75540993/css-gradient-live-refresh

1条答案

按热度按时间

jq6vz3qz1#

简单地移除“背景：径向梯度（50% 50 vh、#fff 0%、#000 100%时的椭圆）;.top类中的此行
像这样

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
      body {
        padding: 0;
        margin: 0;
      }

      .back {
        width: 100vw;
        height: 100vh;
        background: radial-gradient(ellipse, #fff 0%, #000 100%);
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .top {
        width: 100vw;
        height: 11.5vw;
        /* c */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
      }
    </style>
  </head>

  <body>
    <div class="back"></div>
    <div class="top"></div>
  </body>
</html>

赞(0）回复(0）举报 2023-02-26

我来回答

CSS渐变实时刷新

1条答案

相关问题

热门标签

最新问答