【问题标题】:CSS image background and gradient - separate them into two lines?CSS图像背景和渐变 - 将它们分成两行?
【发布时间】:2017-12-16 18:16:34
【问题描述】:

如何分开

background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,0.5)), url("../images/3.jpg");

例如(当然不行):

background-image: linear-gradient(to bottom, rgba(255,0,0,0));
background-image: url("../images/3.jpg");

有什么想法吗?

【问题讨论】:

  • 不,这就是逗号语法的用途。你想达到什么目的?我的猜测是您想要顶部的 jpg;在这种情况下,只需更改顺序即可。
  • @MrLister 我想通过内联 html 添加图像,但将渐变保留在 css 文件中。
  • 好的,然后使用内联html?
  • @Highdef 我认为这是唯一的。认为它可能是其他方式。
  • 可以使用两个嵌套元素;将一个背景放入父级,将另一个背景放入子级。

标签: css background-image linear-gradients


【解决方案1】:

您需要用逗号分隔渐变和图像。

background: linear-gradient(to bottom, rgba(255,0,0,0)),
            url("../images/3.jpg");

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-15
    • 2012-10-15
    • 2012-12-29
    • 2013-05-11
    相关资源
    最近更新 更多