add style.transparent option.

lib/widget.js

@@ -2050,6 +2050,7 @@ function Element(options) {
     this.style.blink = options.blink;
     this.style.inverse = options.inverse;
     this.style.invisible = options.invisible;
+    this.style.transparent = options.transparent;
   }
 
   this.hidden = options.hidden || false;
@@ -3803,7 +3804,11 @@ Element.prototype.render = function() {
   // To deal with this, we can just fill the whole thing
   // ahead of time. This could be optimized.
   if (this.tpadding || (this.valign && this.valign !== 'top')) {
-    this.screen.fillRegion(dattr, bch, xi, xl, yi, yl);
+    if (this.style.transparent) {
+      this.screen.fillRegion(darken(dattr), bch, xi, xl, yi, yl);
+    } else {
+      this.screen.fillRegion(dattr, bch, xi, xl, yi, yl);
+    }
   }
 
   if (this.tpadding) {
@@ -3871,19 +3876,31 @@ Element.prototype.render = function() {
         for (; x < xl; x++) {
           cell = lines[y][x];
           if (!cell) break;
-          if (attr !== cell[0] || ch !== cell[1]) {
+          if (this.style.transparent) {
-            lines[y][x][0] = attr;
+            lines[y][x][0] = darken(attr);
-            lines[y][x][1] = ch;
+            if (content[ci]) lines[y][x][1] = ch;
             lines[y].dirty = true;
+          } else {
+            if (attr !== cell[0] || ch !== cell[1]) {
+              lines[y][x][0] = attr;
+              lines[y][x][1] = ch;
+              lines[y].dirty = true;
+            }
           }
         }
         continue;
       }
 
-      if (attr !== cell[0] || ch !== cell[1]) {
+      if (this.style.transparent) {
-        lines[y][x][0] = attr;
+        lines[y][x][0] = darken(attr);
-        lines[y][x][1] = ch;
+        if (content[ci]) lines[y][x][1] = ch;
         lines[y].dirty = true;
+      } else {
+        if (attr !== cell[0] || ch !== cell[1]) {
+          lines[y][x][0] = attr;
+          lines[y][x][1] = ch;
+          lines[y].dirty = true;
+        }
       }
 
       // if (wideChars.test(ch)) {

test/widget-shadow.js

@@ -28,9 +28,13 @@ var over = blessed.box({
   width: '50%',
   height: '50%',
   style: {
-    bg: 'red'
+    bg: 'red',
+    transparent: true
   },
-  content: 'Foo'
+  border: 'line',
+  draggable: true,
+  tags: true,
+  content: '{yellow-fg}{bold} --Foo-- {/}'
 });
 
 screen.key('q', function() {