css - 将 css3 渐变与背景图像相结合

标签 css background-image gradient

我尝试使用这个 reference 来完成这项工作.然而,它似乎并没有起到作用。我错过了什么?我只需要另一双眼睛看这个。谢谢。

显示背景图像,但不显示渐变。这是一个fiddle向您展示我的意思。

我做错了什么?

  background: #23458E;
  background-image: url('/static/images/grey.png'); /* fallback */
  background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
  background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
  background-image: url('/static/images/grey.png'),    -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
  background-image: url('/static/images/grey.png'),     -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
  background-image: url('/static/images/grey.png'),      -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
  background-image: url('/static/images/grey.png'),         linear-gradient(top, #23458E, #2661A8); /* W3C */

最佳答案

图像是完全不透明的,所以由于它是在渐变之前指定的,所以它覆盖了渐变。

您的图像和渐变都是完全不透明的,因此不清楚您究竟想用它们完成什么。目前我能提供的最好的解释是您的问题。

关于css - 将 css3 渐变与背景图像相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16573698/

相关文章:

javascript - 防止 firefox 在溢出元素更改时重置滚动位置

javascript - 显示给定 (X,Y) 元组的图形

javascript - 如何使用 JavaScript 更改按钮的背景图像?

android - SeekBar 的拇指上的半径必须 > 0

TensorFlow 梯度 : Getting unnecessary 0. tf.gradients 的 0 个梯度

css - Opera 是否有 -moz-linear-gradient 或 -webkit-gradient 类型的 CSS?

html - 如何避免大量 @import CSS 但无法在一个巨大的 CSS 文件中工作

javascript - 带封面的全屏背景,但专注于图像的一部分

html - CSS 背景图像未按预期工作

MATLAB "gradient"函数交换 x 和 y 维度?