html - 链接的线性渐变

标签 html css

我试图给链接下划线一个线性渐变,如下所示。

不幸的是它没有在这里显示颜色。问题是在我的浏览器中我只看到一种颜色,第一个渐变色……第二个有什么问题?制作这种下划线渐变的方法有误吗?

a {  
    background-image: linear-gradient(to right, rgba(57, 72, 255, 1) 100%, rgba(57,     213, 255, 1) 100%);
    background-repeat: repeat-x;
    background-size: 4px 4px;
    background-position: 0 22px;
  }
  
  a:visited {  color: #2a2a2a;
}
<a href=""> <p> Lorem Ipsum </p> </a>

好的,明白了。如果还有人想知道问题出在哪里:您必须将背景大小设置为 auto

最佳答案

a {  
    background: linear-gradient(to right, 
    rgba(57, 72, 255, 1), 
    rgba(57, 213, 255, 1)
    );
    background-position: bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    text-decoration: none;
  }
  
<a href="#">  Lorem Ipsum  </a>

  • 背景宽度必须为宽度的 100%,
  • 位于底部,
  • 并且不重复。

最重要的是我被删除了默认下划线。

关于html - 链接的线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50439833/

相关文章:

javascript - 如果不是移动设备,则悬停时 Bootstrap 导航栏下拉

html - 在 HTML5 中跨页面加载存储本地音频文件数据

javascript - 是否可以使用 KendoUI 获取浏览器名称和版本

javascript - 模式关闭后视频继续播放 Firefox

html - 使用CSS在html页面中编辑页脚

javascript - 多于一个元素的classList.toggle问题

python - 如何使用 lxml 访问评论

javascript - 如何使 'Red Stoplight' 按钮出现在表格单元格中?

css - 在 drupal 7 中将 php 文件用于自定义 css 的困难

css - 媒体查询字体大小不调整