CSS - Mostrar imagen y color dentro de un DIV

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Mostrar imagen y color dentro de un DIV

Publicado por alvin (3 intervenciones) el 22/11/2017 17:01:56
Saludos amigo, quiero realizar ese efecto de imagen de foto opacada un poco con un div de color. Exactamente lo mismo que esta en la imagen, dejo el link también de donde saque la idea por si ayuda agradecería mucho la ayuda.

Link: http://lbd-pro-react.creative-tim.com/?_ga=2.36796965.409599020.1511364899-76024491.1511364899#/dashboard

Foto del efecto a realiza:
example
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Mostrar imagen y color dentro de un DIV

Publicado por Enrique (43 intervenciones) el 22/11/2017 19:07:43
Tan fácil como hacer inspect element y ver que css tiene para hacer ese efecto
Tiene una imagen de fondo
un background y una opacidad

Screen-Shot-2017-11-22-at-12.13.30-PM
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Mostrar imagen y color dentro de un DIV

Publicado por alvin (3 intervenciones) el 22/11/2017 19:31:24
Pues ya lo e intentado y no lo e logrado por eso abri el tema para ver si me ayudan, pues tengo esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper theme-3-active pimary-color-green">
 
	<div style="background-image: url(views/modulo/dist/empleoye.jpg);">
 
		<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 logininformation" style="background-image: url(views/modulo/dist/empleoye.jpg); background-size: cover;
			background-position: 50%;">
		<h1>hola</h1>
		</div>
 
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 loginseccion">
			<h2>pedro</h2>
		</div>
	</div>
</div>

Y tengo esto en CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
.logininformation:before{
 
	opacity: .33;
	background: #000;
 
}
.logininformation{
	height: 100%;
	background: #f5f5f5;
	position:absolute;
    top:0;
    bottom:0;
    left:0;
    overflow:hidden;
    z-index:-1
}
 
.loginseccion{
	height: 100%;
	background: #0d145d;
	position:absolute;
    top:0;
    bottom:0;
    right:0;
    overflow:hidden;
    z-index:-1
}

Y todo esto me da un resultado así, solo me hace falta combinar la imagen con el efecto de color.

captura
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Mostrar imagen y color dentro de un DIV

Publicado por alvin (3 intervenciones) el 28/11/2017 21:12:10
Logre conseguir el efecto pero ahora las letras del div me salen opacas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar