Question

我正在处理HTML页面。此页面允许用户选择将用作DIV的“背景图像”属性值的图像。用户还可以选择会使图像变暗的颜色。

为了构建这个，我找到了这个网站：http://doodles.tev.net/texture2/。它完全符合我的要求。但是，我的应用程序中的代码似乎没有适当地应用背景颜色。如果设置了背景图像值，则背景颜色不会产生任何影响。这就是我所拥有的：

<div id="myDiv" style="height:200px; width:200px; border:1px solid black; display:inline-block;">&nbsp;</div>

function updateMyDiv() {
  var bg = getBG();
  $("#myDiv").css("background-color", bg);

  var fg = getFG();
  $("#myDiv").css("color", fg);

  var txt = getTxt();
  if ((txt != null) && (txt.path != null) && (txt.path.length > 0)) {
    $("#myDiv").css("background-image", 'url(' + txt.path + ')');
  } else {
    $("#myDiv").css("background-image", '');
  }
}

为什么链接的网站在选择颜色时会将色调应用于“60度灰度”。但是，在我的应用程序中，颜色永远不会被应用。

谢谢

Answer 1

如果您提供背景图像，它将始终显示在背景颜色的顶部。背景颜色通常用作后备，如果背景图像返回404，或者图像未覆盖所有背景。

如果您仔细查看链接到的网站，您会看到图片是半透明的;我想这可能是你的问题。你的图像是半透明的吗？

使用CSS将颜色色调添加到背景图像

1 个答案: