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
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


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

		</style> 
	</head>
	<body>
		<h1>
    	<span class="visually-hidden">selfhtml</span>
      <img src="https://wiki.selfhtml.org/images/7/77/Selfhtml-gepunktet.svg" alt="" role="none">
      <span> - unsere Punkte sind keine Windpocken!</span></h1>
		<footer>
			<p>Dieses Beispiel demonstriert die <a href="https://wiki.selfhtml.org/wiki/Image-Replacement"><strong>Image Replacement</strong></a>-Technik, bei der Text durch ein externes SVG ersetzt wird.</p>
		</footer>
	</body>
</html>

Abgerufen am 30.06.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Hintergrund-5.html"