javascript - CSS 线性渐变未在 Chrome、Safari 中显示

标签 javascript html css linear-gradients

我像这样在我的 Html 中加载一个 CSS 文件:

<head>
<title>H e a d s p a c e</title>
<style>
        <link rel="stylesheet" href="styles.css" type = "text/css">

        </style>
        </head>

而我的 css 文件如下所示:

body {
    width: 100%;
    height: 100%;
  background: #11e8bb; /* Old browsers */
  background: -moz-linear-gradient(top,  #11e8bb, #8200c9); /* FF3.6-15 */
  background: -webkit-gradient(linear, center top, center bottom, from(#11e8bb), to(#8200c9));   
  background: -webkit-linear-gradient(top,  #11e8bb,#8200c9); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #11e8bb ,#8200c9); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#8200c9',GradientType=0 ); /* IE6-9 */
}

然而它实际上并没有显示任何东西。背景只是白色。在对其他 stackoverflow 的/在线论坛进行了无数次浏览后,我感到很无助 - 有什么问题吗?

这两个文件都在服务器上并且在同一个目录中。非常感谢任何帮助!

最佳答案

不要将指向样式表的链接放在样式标签内。

<head>
<link rel="stylesheet" href="styles.css" type = "text/css">
</head>

本该如此。 您的代码在其他方面工作得很好。

关于javascript - CSS 线性渐变未在 Chrome、Safari 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42335302/

相关文章:

javascript - 使用 Webpack + Jquery + bootstrap 进行 react

javascript - Highcharts - 关于完整图表宽度的问题

javascript - Canvas:您将如何使用 Bresenham 的直线算法在两点之间进行正确的插值?

css - IE7 失去了我的 h3

html - 元素符号和 float 图像之间的空间

javascript - RoR无需刷新召回功能

Javascript 待办事项列表应用程序推送到数组/本地存储

jquery - 如何在公共(public)位置进行更新以更改 jqGrid 的标题对齐方式

html - 什么是 SVG 中的笔划和笔划宽度以及它如何在 HTML 中呈现?

html - 如何用 CSS 沿对 Angular 线或垂直方向打断表格?