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;

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

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

我尝试单独设置bg图像和渐变，但它不适用于我的配置。我需要一个只在保留所有其他参数的情况下改变背景颜色的解决方案

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

Answer 1

我最后只是用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 2

尝试以下代码

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";
}

并调用以下函数 changeColor（element，colorvalue）;

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））”

只更改css背景的一个属性

4 个答案: