只改变css背景的一个属性

Question

我目前正在尝试使用图像动态更改背景的背景渐变。我正在使用以下 CSS 属性来添加图像和渐变。

CSS：

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))), url('../images/walters.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;

这里的代码几乎相同，唯一的例外是跨浏览器兼容性。我唯一需要更改的是带有0.9 alpha 的RGBA 的实际颜色或属性中的最后一个颜色（rgba(0, 0, 0, 0.9)）。

当用户从颜色选择器中选择实际属性时，应使用 Javascript 更改它。

我尝试分别设置背景图像和渐变，但它不适用于我的配置。我需要一个解决方案，只更改背景颜色，同时保留所有其他参数

任何帮助都会很棒，谢谢！

Answer 1

试试下面的代码

function getCssValuePrefix() {
    var rtrnVal = '';
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}


function changeColor(elm, color) {
    elm.style.background = getCssValuePrefix() + "linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, " + color + " 100%), url('../images/walters.jpg') no-repeat";
}

并调用以下函数 改变颜色（元素，颜色值）；

Answer 2

我最后只是用 Javascript 添加了所有的 css。问题是没有设置定位，所以添加center 解决了我的问题。

bottom.css("background", 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9))), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background", '-o-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.9) 100%), url("images/walters.jpg") no-repeat center');
bottom.css("background-size", 'cover');

Answer 3

你不能用CSS单独控制它们，但是如果你让渐变和你的主背景颜色相同（基本上掩盖了外观），那么你只能改变background-color属性，你会得到你想要的结果.

background: linear-gradient(to top, transparent 0%, white 41%, white 100%)

颜色与 html,body 中的主要背景相同

这是一个并排比较：

div {
  height: 150px; width: 200px;
  float: left; margin: 10px;
}
body {background-color: white;}

div.bga { /*your current code*/
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.9) 100%), url('../images/walters.jpg') no-repeat;
}

div.bg { /*change to this*/
  background: linear-gradient(to top, transparent 0%, white 41%, white 100%), url('../images/walters.jpg') no-repeat;
  background-color: rgba(0,0,0,0.9);
}

<div class="bg">gradient color is same as background of the body</div>

<div class="bga">your current one</div>

这种方法可能只在你不添加图片时有用，因为渐变会隐藏大部分图片。

---

方法#2。
您可以使用 CSS 变量来代替您要更改的颜色。
变量通常添加到 html（根元素）中，然后在需要的地方使用。

:root {
  /*define your variables here*/
  --gradient-bg-color: rgba(0,0,0,0.9);
}

div.bg {
  height: 150px;
  background: linear-gradient(to bottom, transparent 0%, transparent 59%, var(--gradient-bg-color) ), url('../images/walters.jpg') no-repeat;
}

<div class="bg"></div>

Answer 4

您可以将 element.style.backgroundImage 属性设置为同时包含图像和以逗号分隔的颜色或渐变。

document.body.style.backgroundImage = "url('img_tree.png'), 线性渐变(rgb(0,0,0), rgb(255,255,255))"