C

CSS Tutorial transparent text on responsive image

Wieder ein Ort für die ganze Familie. Für mich selbst ist der schönste Bergsee der Alpen. 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>Wieder ein Ort für die ganze Familie. Für mich selbst ist der schönste Bergsee der Alpen. 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 */

}

CategoriesTutorial - Text

Schreibe einen Kommentar

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