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,8 +3804,12 @@ 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')) {
+    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) {
     xi += this.padding.left, xl -= this.padding.right;
@@ -3871,20 +3876,32 @@ Element.prototype.render = function() {
         for (; x < xl; x++) {
           cell = lines[y][x];
           if (!cell) break;
+          if (this.style.transparent) {
+            lines[y][x][0] = darken(attr);
+            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 (this.style.transparent) {
+        lines[y][x][0] = darken(attr);
+        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)) {
       //   x++;

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() {