代码之家 › 专栏 › 技术社区 › Marc.2377

如何在不知道图像URL的情况下向现有背景图像添加覆盖?

css3 css javascript

Marc.2377 · 技术社区 · 6 年前

类似于 How do I overlay a gradient background over an existing background with css? 当然 How do I combine a background image and css3 gradient on the same element? ,但在这种情况下,我会不对背景图像URL进行控制。

案例分析

为了改善我在Facebook上的体验,我设计了以下CSS样式:

.jewelcount>span/*用更中性的红色替换通知颜色*/
背景色:AB5151;
}
.jewelbutton>div/*在通知图标上添加一个模糊的覆盖,以获得更中性的白色阴影。*/
背景图像:线性渐变(rgba(66,103,178,0.1),rgba(66,103,178,0.1)),url(/rsrc.php/v3/yc/r/rzkhvpo9lsv.png)!重要事项;
}

(使用style扩展名for firefox)。

它起作用了,



但与此同时,背景图像的URL从/rsrc.php/v3/yc/r/rzkhvpo9lsv.png>to/rsrc.php/v3/y1/r/vzxefuzzjfgs.pngand I had to update my style manually,which sucks.


因为我根本没有更改背景图像的url()。at all(我只是在background imageproperty中重新使用它来实现覆盖效果),有没有一种方法可以“prepend”thelinear gradientfunction to whateverbackground imagei s already in用于该元素?< >

如果在CSS中不可能实现(我猜不可能),我将使用javascript解决方案,以便与greasemonkey(no jquery,though).。


谢谢。当然了。How do I combine a background-image and CSS3 gradient on the same element?但是在这种情况下我会的不控制背景图像的URL。

案例分析

为了改善我在Facebook上的体验,我设计了以下CSS样式:

.jewelCount > span { /* replaces notification color with a more neutral tone of red */
    background-color: #ab5151;
}
.jewelButton > div { /* adds a faint overlay on top of notification icons to achieve a more neutral shade of white */
    background-image: linear-gradient(rgba(66, 103, 178, 0.1), rgba(66, 103, 178, 0.1)), url(/rsrc.php/v3/yc/r/rZKhvPo9Lsv.png) !important;
}


(使用Stylish extension for Firefox)

它起作用了,



但与此同时,背景图像的URL从/rsrc.php/v3/yc/r/rZKhvPo9Lsv.png到/rsrc.php/v3/y1/r/vZXeFuzjfGs.png我不得不手动更新我的风格,这太糟糕了。

因为我不会改变背景图像的url()完全(我只是在background-image属性以实现覆盖效果),是否有方法“预挂”linear-gradient任何功能背景图像已经在该元素中使用?

如果在CSS中不可能(我猜不可能),我将使用JavaScript来解决这个问题。Greasemonkey(但没有jquery)。

谢谢。

2 回复 | 直到 6 年前

vals 6 年前

你不能只通过CSS得到你想要的。

你有两种方法可以达到同样的效果:

嵌入阴影

您可以用颜色设置一个插入阴影

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(yellow, white);
    box-shadow: inset 0px 0px 0px 1000px rgba(0,0,255,0.4);
}

<div></div>

伪元素

可以使用所需的颜色在DIV上设置伪元素。 (您需要定位DIV相对位置以获得伪位置OK)

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(yellow, white);
    position: relative;
}

div:after {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    
    background: rgba(0,0,255,0.2);
}

<DIV></DIV>

Marc.2377 6 年前

目前我用一个用户脚本解决了这个问题。

// ==UserScript==
// @name     Facebook notification icon color
// @version  1
// @match    https://www.facebook.com/*
// @run-at   document-start
// @grant    none
// ==/UserScript==

(function start(){
    var jewels = document.querySelectorAll('.jewelButton');
    if(!jewels[0]) {
      setTimeout(start, 50);
      return;
    }
    jewels.forEach(function(elem) {
      var url = window.getComputedStyle(elem.firstChild).getPropertyValue('background-image');
      elem.firstChild.style.setProperty('background-image', 'linear-gradient(rgba(66, 103, 178, 0.1), rgba(66, 103, 178, 0.1)), ' + url, 'important');
    });

})();