Cómo superponer imágenes con color en CSS?

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

Algo como esto. Simplemente agregue la clase overlay al encabezado, obviamente.

Use mutple backgorund en el elemento y use un degradado lineal como su superposición de color declarando las paradas de color de inicio y final como el mismo valor.

Tenga en cuenta que las capas en una declaración de múltiples fondos se leen de manera similar a como se representan, de arriba a abajo, así que ponga su superposición primero, luego su imagen bg:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

Si no le importa usar el posicionamiento absoluto, puede colocar su imagen de fondo y luego agregar una superposición usando opacidad.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

Ver aquí: http://jsfiddle.net/4yh9L/

En helpshift, usaron la clase home-page como

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

Puedes intentar algo similar como esto

Puede usar borde semitransparente superthick negativo...

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

Esta solución requiere que usted sepa los tamaños exactos del objeto cubierto.