How to Make a Semi Transparent Background

How do I make a semi transparent background?

Use rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

This will give you 50% opacity while the content of the box will continue to have 100% opacity.

If you use opacity:0.5, the content will be faded as well as the background. Hence do not use it.

How to make semi-transparent background

use rgba background.

background: rgba(0, 0, 0, 0.5);

values are in order red intensity, green intensity, blue intensity

the decimal value is the opacity, and it runs from 0 to 1.

if you need to customize it without too many difficulties, check out: css3 maker

How do you create a semi-transparent background for a UIView?

I think what you mean is you want the backgroundColor of your UIView to be semi transparent? If you want white/transparent use this:

myView.backgroundColor = [UIColor colorWithWhite:myWhiteFloat alpha:myAlphaFloat];

else if you want it to be another color use the general UIColor method: +colorWithRed:green:blue:alpha:

Is it possible to make a transparent square on a semi-transparent background?

A nice trick to get the same effect, is to use a box-shadow on the overlay:

.overlay {
    box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}

In this case, 100vmax fills up the whole page.

How can I create a widget with a semi-transparent background and an opaque foreground?

I suppose you'd not need a stack to achieve it. You can directly specify the background by specifying the decoration for your widget.

Example:

new Container(
            decoration: new BoxDecoration(
              border: new Border.all(width: borderWidth ,color: Colors.transparent), //color is transparent so that it does not blend with the actual color specified
              borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
              color: new Color.fromRGBO(255, 0, 0, 0.5) // Specifies the background color and the opacity
            ),
          child: _content,
        )

Hope that helped!

CSS: Semi-transparent background and an image

background-color is placed underneath background-image, not above it (when rendered in the web-browser). To put a semi-transparent white block over an image, you will need to place another different HTML element on top of it with background-color.

CSS Semi-Transparent box

You could just update your css and fixes you errors :

.TextBOx{
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  border: #solid 10px #000;
  background-color: rgba(105,100,100,0.8);
  width:80%;
  margin-left: auto ;
  margin-right: auto ;
}

Goed so ?

How to create a transparent region (div) over semi-transparent background?

Nice question! Consider this simplified implementation:

var $helperLeft = $('.helper-left'),
    $helperRight = $('.helper-right'),
    $helperTop = $('.helper-top'),
    $helperBottom = $('.helper-bottom'),

$view = $('.view').draggable({
    drag: onDrag
}),
viewWidth = $view.width(),
viewHeight = $view.height();

function onDrag(event, ui) {
    $helperLeft.css({width: ui.position.left});
    $helperRight.css({left: ui.position.left + viewWidth});
    $helperTop.css({
        width: viewWidth,
        left: ui.position.left,
        height: ui.position.top
    });
    $helperBottom.css({
        top: ui.position.top + viewHeight,
        left: ui.position.left,
        width: viewWidth
    });
}

onDrag(null, {position: $view.position()});

That's it! Very short and simple. I think resizing is straightforward too.