Wie man ein Bild hinter den text in CSS?

Ich soll ein Bild angezeigt werden hinter text in eine <h1> tag. Aber wenn ich das Bild ersetzt den text und schiebt den text darunter.

Screenshots : Vor und Nach

CSS

body {
  background-color: #1a1a1a;
}
header,
h1 {
  text-align: center;
  font-family: CGF Locust Resistance;
  font-size: 50px;
  color: lightgray;
  -webkit-text-stroke: 1.5px #000;
}
header {
  margin: 0;
  padding: 0;
  height: 100px;
  border-bottom: .5px solid #b3b3b3;
}
nav {
  position: relative;
  top: -5px;
  margin: auto;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: center;
  border-bottom: .5px solid #b3b3b3;
}
nav ul li {
  display: inline;
  color: #fff;
  font-family: CGF Locust Resistance;
  font-size: 12.5px;
  padding: 20px;
}
.red {
  color: red;
}
#omen {
  z-index: -1;
}
  • Könnten Sie den html-code als auch?
InformationsquelleAutor Cian OT | 2016-05-24
  1. 1

    Set das Bild als hintergrund-Bild des headers. Ist es das, was Sie sind, nach?

    InformationsquelleAutor Wim Mertens
  2. 0
    h1 {
  position : abosolute; 
}

    Dies sollte den trick tun, aber es ist besser zu nutzen-ids anstelle von einer änderung der h-tags überall auf Ihrer Seite

    InformationsquelleAutor A. Ilazi
  3. 0

    Setzen Sie diesen parameter, um das Bild-Objekt in css (z.B. Erstellung von benutzerdefinierten Klassen) :

    .image{
    position: relative;
}

    Und diese in die text :

    .text{
    position: absolute;
}

    Natürlich, Sie haben um diese Klassen zu den jeweiligen Objekten. Hoffe, es hilft !

    InformationsquelleAutor jsanchezs
  4. 0
    h1 {
  background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
  background-size: 400px auto;
  }

    Das ist ungefähr wie würden Sie ein hintergrund Bild in dieser situation. center 100px bedeutet horizontal zentriert und 100px von oben (in Bezug auf die h1 element).

    InformationsquelleAutor Johannes
Schreibe einen Kommentar