html - tamaño - ¿Cómo superponer una imagen con color en CSS?

tamaño de imagen html

Question

Objetivo

Quiero una superposición de color en este elemento de encabezado. ¿Cómo puedo hacer esto con CSS?

Código

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

Answer 1

Debe usar rgba para superponer su elemento con photos.rgba es una forma de declarar un color en CSS que incluye soporte de transparencia alfa. puedes usar .row como una .row como esta:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

Answer 2

En helpshift, usaron la home-page la clase 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 similares como este

Answer 3

Puede usar un borde negativo negativo semi transparente ...

.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//company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

Esta solución requiere que usted conozca el tamaño exacto del objeto cubierto.

Answer 4

Si no te importa usar el posicionamiento absoluto, puedes colocar tu 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;
}

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

Answer 5

Utilice el fondo mutle en el elemento, y use un degradado lineal como su superposición de color declarando las paradas de color inicial y final como el mismo valor.

Tenga en cuenta que las capas en una declaración de varios antecedentes se leen de forma similar a como se representan, de arriba a abajo, así que primero coloque su superposición, 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
}

Answer 6

#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. Solo agrega la clase de overlay al encabezado, obviamente.