问题标签 [css-gradients]

我想有一个图像作为背景，还有一个 CSS 线性渐变：

我在桌面浏览器（Firefox 44.x；IE 10；Chrome；Safari）上没有问题，但不适用于移动浏览器（我用我的 iphone 5、（9.x）和 safari、app firefox、app铬合金）。

我用这个：

有什么问题？

非常感谢，对不起我的英语:)

我有一些这样的CSS：

尽管 Chrome 报告了 HTTP 400，但 Firefox 报告一切都是花花公子。

evil-whales.png,%20linear-gradient(rgb(78,%2078,%2078)%2081%,%20rg...%20rgba(76,%20201,%2061,%200)%2083%,%20rgba(78 ,%2078,%2078,%200)%20100%):1 获取 ...

如何在不简单地将其从控制台视图中隐藏的情况下解决此问题？

我正在尝试在滚动 div 的底部放置一个小渐变。我的解决方案基于这个 SO thread的公认答案。渐变显示得很好，但是当我滚动 div 中的内容时，渐变的底部会移动。我需要它保持原位，以便内容独立于渐变滚动。我尝试了几种, 和的组合position: fixed，但无济于事。我错过了什么？position: relativeposition: relatve

相关标记：

相关CSS：

结果：

border-top-color是#9b9c9d和border-bottom-color是#f6f9fc。_ 渐变旨在border-left将和上的顶部颜色转换为底部颜色border-right。

我如何混合border-left-imageandborder-right-image与border-top-colorand border-bottom-color？

HTML

CSS

我已经在互联网上搜索了 2 天，但我一直无法找到我的问题的答案：CSS 线性渐变在我的代码中不起作用，在任何浏览器中。我在小提琴和其他有效的网站上看到了渐变。我什至尝试将他们的代码复制并粘贴到我的代码中，但它不起作用。我只得到用于我的后备的纯背景颜色。我什至对我的拼写进行了三次检查，以确保某些内容不是 PEBCAK 错误……当我尝试将我的代码放入小提琴时，它仍然不起作用。我很难过......有人看到我做错了什么吗？

我的研究从这里的一个答案开始，它解释了渐变需要一个高度，所以我看到了一个让身体设置最小高度的技巧。然后我看到大多数人在div中都有渐变，所以我添加了一个测试div来尝试设置高度为100px。没有任何效果。这是我当前的测试代码：

我的 HTML：

CSS：

正文才是我真正关心的（设置页面的背景）。我尝试将带有渐变类的 div 添加为仅命名颜色的 div 作为来自另一个页面的复制粘贴，以查看它是否可以工作。

是的，我知道它不向后兼容，我会在我让它自己正常工作后到达那里。我在 Windows 10 上运行 Chrome 版本 50.0.2661.75 m。还在 IE (Edge) 和 Firefox 中对其进行了测试......甚至没有看到渐变的迹象。我什至尝试了 Chrome 的 -webkit- 前缀，只是为了看看这是否可行......没有骰子。

这是任何人都可以玩的上述代码的小提琴：https ://jsfiddle.net/e0p48ubf/2/

我需要制作多个渐变，如下所示：

现在看看灰/白渐变的中心是如何不同的，在某些情况下它来自中心，对于一些来自左中心，对于一些来自中心底部。

我使用THIS工具生成以下渐变：

FIDDLE HERE，现在可以像我在上图中显示的那样制作渐变，还是我必须使用图像？

我想用css创建一个奇怪的三角形。我的第一个想法是使用透明边框，transform: rotate它起作用了（见左三角形）。现在我想使用渐变边框图像图案作为同一个三角形的背景，但我不能让它工作。我尝试了很多事情，比如改变border-width、使用包装器overflow:hidden等等，但没有任何效果。在这里，我发布了我的一个尝试（见正确的形状），因为您看到该图案占据了所有空间，而不是遵循三角形。有任何想法吗？

编辑： Andrey Fedorov 的回答很好，但是当背景不是纯色时会出现问题，例如：

我正在开发基于引导程序的网页，在我的 CSS 文件中，我有以下代码：

它将渐变作为背景应用到我的页面，但是我还有另外两个渐变：

和

现在我想在用户刷新页面时随机应用这 3 个渐变中的一个（例如，首先他看到第二个渐变，然后他刷新页面并看到第三个渐变，等等）。

我怎样才能达到这个效果？

我需要知道这是否可能。“创意” Photoshop 部门想出了这张图片，之前它只是从 1 到 5 种颜色的渐变。他们仍然这样做，但他们现在怎么在上面画了一个白色的圆圈呢。我怎么会去完成这个。示例语法没有精确定位。在白色圆圈的顶部，我需要在“白色”中添加特定的字体和文本

提前谢谢了。

我正在尝试使用此代码在背景图像上放置渐变

我正在获取图像，但未应用渐变