Banner Web con css utilizando una imagen de color negro

Vamos a realizar un Banner Web como el ejemplo siguiente:

Html:

<div class="contenedor">
	<div class="contenedor_fondonegro" > 
	   <div class="columna_1_fondo_negro"></div>			
		<div  class="ctn_texto">
	   	    <h1 class="titulo1">TITULO 1</h1>
		    <h2 class="titulo2">TITULO 2</h2>
			<a class="button verde" href="#">Ver Demostración</a>				
		</div>	
	   </div>	
	<div class="columna_2"></div>			
</div>

Estilos:

<style type="text/css">
	.contenedor{height: 600px;width: 100%; background-color: darkgrey;margin-top: 10px;
		background-image: url("/pruebas/banner_web/css/fondo_negro_cortado_diagonal/man-in-black-holding-phone-618613.jpg");		background-position: 10cm 0px;
    background-attachment: scroll;  background-repeat: no-repeat;
	 background-size: cover;
	display: flex}	
	
	.contenedor_fondonegro{ width:80%;position: relative;}
	.columna_1_fondo_negro{
	background-image: url("/pruebas/banner_web/css/fondo_negro_cortado_diagonal/fondo_negro.png");
    background-position: 62% 42%;		
    background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%;
		position: absolute;
	}
	.columna_2{width: 20%;}	/*Esta columna se pone para que el fondo negro no llegue hasta el final*/
	
	.ctn_texto {width: 100%; margin-left: 200px; }
		
	.titulo1 {
    font-family: Montserrat, sans-serif; font-size: 100px; font-weight: 400; letter-spacing: -2px;    line-height: 1.4em;
		position: relative;	color: #ffffff; font-weight: bold;   
	}
	.titulo2{
    font-family: Montserrat, sans-serif;font-size: 60px; font-weight: 300; letter-spacing: -1.5px;  line-height: 1.4em;
		position: relative;top: -70px; color: #d12a5c;
	}
	.button {    width: 200px;display: flex; justify-content: space-around; align-items: center;  border: 1px solid #395d9b;
    text-align: center; cursor: pointer; font-weight: bold;  padding: 15px 10px;    top: -50px;
		position: relative;	    text-align: center; 
		-webkit-flex-flow: row-reverse nowrap;
  	  -webkit-transition: all 0.50s ease-in-out;  
	}
	.button.verde { background-color: #D12A5C; color: #FFF; border-color: #D12A5C;}
	.button.verde:hover {background-color: #CA8437;color: #fff; border-color: #CA8437;}
	
	a:link {text-decoration: none;}
</style>