Beispiel:CSS-Hintergrund-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de"> 
	<head> 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Image Replacement</title>
		<style>
body   { 
   background: linear-gradient(white, deepskyblue) ;
	color: midnightblue;
	min-height: 100vh;
	display: grid;
	grid-template-rows: 1fr 8em;
}

span {
  display: block
}

.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url(https://wiki.selfhtml.org/images/7/77/Selfhtml-gepunktet.svg);
  width: 800px;
  height:110px;
}


footer {
	background: midnightblue;	
	color: white;
}
footer a {
  color: skyblue;
}

		</style> 
	</head>
	<body>
		<h1><span class="ohne-text">selfhtml</span><span> - unsere Punkte sind keine Windpocken!</span></h1>
		<footer>
			<p>Dieses Beispiel demonstriert ein <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/Image_Replacement"><strong>Image Replacement</strong></a>, bei dem der Text durch eine externe SVG-Grafik ersetzt wurde.</p>
		</footer>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Hintergrund-5.html&oldid=65507“