how to put a layer in a background image and highlight text

Question

how to put a layer in a background image and highlight text

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I'm doing a FULL INTRO style and I'm putting a dark layer in the background image using CSS filter: brightness (0.4); but it also affects the text, as I do so that the text stands out and is not part of the dark layer.

My css code:

.portada{
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    filter:brightness(0.4);
}
.portada:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background: #000;
    opacity: 0.5;
    z-index: 0;
}
.contenido{
    max-width: 60%;
    margin: 0px auto;
    text-align: center;
    padding: 2.5em 10px;
}
.contenido .titulo{
    font-family: 'Montserrat', sans-serif;
    color: #e0822f;
    font-weight: 500;
    font-size: 4.5em;
}
.contenido .subtitulo{
    font-family: 'Montserrat', sans-serif;
    color: #e8d696;
    font-size: 1.3em;
}

html

<header>
   <div class="portada"></div>
      <div class="contenido">
         <h1 class="titulo">Restaurante Web</h1>
         <div class="subtitulo">Web para Restaurante en HTML 5, CSS3 Y JAVASCRIPT con Full Responsive.
        </div>
      </div>
 </header>

.........

html css bootstrap-4

asked by GianCarlo Conyas 22.02.2018 в 21:15

source

2 answers

1

You can use filter of css

.portada{
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

html

<header>
   <div class="portada"></div>
      <div class="contenido">
         <h1 class="titulo">Restaurante Web</h1>
         <div class="subtitulo">Web para Restaurante en HTML 5, CSS3 Y JAVASCRIPT con Full Responsive.
        </div>
      </div>
 </header>

Regarding the text, it would be enough if you give it a contrasting color, if the background image is dark, try to use light colors in the texts.

I leave you these two links where you have more examples about the filters that you can apply

Link 1

Link 2

Note that this property is not supported in some browsers and in others you must use -webkit - and -moz -

answered by 22.02.2018 в 21:50

excel protect cells Model View-Controller PHP

score 2 · Accepted Answer

You can do it with before in CSS by adding this código to your CSS

 .contenido {
    background-image: url(../img/portada1.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    filter: brightness(0.4);
}

.contenido:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    content: "";
    background: #000;
    opacity: 0.5;
    z-index: 0;
}

I hope it works for you, if you do not highlight the text, add z-index: 1; to class titulo and subtitulo