开发者

Set the alpha value of the element background without changing its style.background value

I heve some html elements having a css background-color in their style.background property.

The color are dinamically generated, so they coould be in all possible formats, like red, #rgb, or rgb(...);

I would like to know if there is a method to set the alpha value of an element background color in the style property, without changing the object.style.background property value (since i don't know in which format is expresse开发者_运维问答d the background-color).

So without using i.e. the rgba(...) value. If possible, the element background color should not propagate to its childs element (as the inner text, etc..). Is it possible?


Right now it's impossible to set only alpha for colors.

But for backgrounds you can try to emulate it using some techniques. For example, look at this fiddle: http://jsfiddle.net/kizu/2sWtH/

There are two test examples:

  1. Using extra helper, where unknown background goes to it.
  2. Another way, where background goes to an original element, but another element for wrapping inner content is needed.

I've demonstrated just the main ways, there are a lot of things to improve or rethink: you can try to use pseudo-element for first example, or another extra element for second: it's just a matter of taste and browser compatibility.

But if you want to get a computed color by js, there is a great article (and micro-service) by Lea Verou: http://leaverou.me/2011/09/css-coloratum-convert-and-share-css-colors/


You'll probably have to parse the colors, but you can try this as a starting point.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜