线性渐变背景末尾的CSS阴影白线

标签 css background linear-gradients

我尝试在 CSS 中构建一个漂亮的渐变,就像在 PhotoShop 中构建的这个:enter image description here

但是当我尝试在 CSS 中创建一个时,我总是在线性渐变背景的末尾看到一条白线:

<html>
<head>

  <style>
    html, body {
      margin:  0;
      padding:  0;
      width: 100%;
      height: 100%;
    }
    body {

      background: transparent;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  </style>
  
</head>
<body>
</body>
</html>
就这样结束了:

Photoshop CSS with the white line

要完全理解:这条线不是真的,它是我的渐变的反作用,它是一条假线!但它仍然是我想抹去的东西。 我相信在 CSS 中有更好的事情要做,不是吗?

最佳答案

改变

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);

关于线性渐变背景末尾的CSS阴影白线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50352442/

相关文章:

javascript - 如何在css中分离过滤器的不同属性?

html - Bootstrap : How to prevent sidebar and main div from collapsing when resizing page?

html - 当我尝试使用 css/html 在我的网站上获取背景时,它不会显示背景

JQuery:设置 CSS 渐变不起作用

html -::after 中与 div 中相同的线性渐变背景

CSS 兄弟选择器未触发

html - 如何仅使用 css 将 div 与外部 div 顶部的偏移量设置为与外部 div 侧面的偏移量相同?

html - 创建倾斜响应背景

javascript - 有没有办法模糊所有页面并使用 jquery/javascript 聚焦某些 div?

html - CSS:如何从图像悬停中删除背景?