CSS Tutorial transparent text on responsive image

Der Oeschinensee liegt unter den schönsten Bergkette je ich im Leben gesehen habe.

Ein Tipp, wie kannst du einfach und schnell dein Bild mit transparenten Text versehen. Ich habe dazu ein Bild von einem meiner Lieblingsort in der Schweiz gewählt, der für mich selbst der schönste Bergsee der Alpen ist. Der Oeschinensee liegt unter den schönsten Bergkette je ich im Leben gesehen habe.

Meine HTML code lautet so:

<!DOCTYPE html>

<html>

<head>

<meta name=“viewport“ content=“width=device-width, initial-scale=1″>

<style>

* {

box-sizing: border-box;

}

body {

font-family: Arial;

font-size: 17px;

}

.container {

position: relative;

max-width: 600px;

margin: 0 auto;

}

.container img {vertical-align: middle;}

.container .content {

position: absolute;

bottom: 0;

background: rgb(0, 0, 0); /* Fallback color */

background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */

color: #f1f1f1;

width: 100%;

padding: 20px;

}

</style>

</head>

<body>

<div class=“container“>

<img src=“img/oeschinensee.jpg“ style=“width:100%;“>

<div class=“content“>

<p>Der Oeschinensee liegt unter den schönsten Bergkette je ich im Leben gesehen habe.</p>

</div>

</div>

</body>

</html>

Und die CSS:

.container {

position: relative;

max-width: 600px; /* Maximum width */

margin: 0 auto; /* Center it */

}

.container .content {

position: absolute; /* Position the background text */

bottom: 0; /* At the bottom. Use top:0 to append it to the top */

background: rgb(0, 0, 0); /* Fallback color */

background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */

color: #f1f1f1; /* Grey text */

width: 100%; /* Full width */

padding: 20px; /* Some padding */

}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.