Beispiel:CSS3 background-blend-mode.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style> 
    #example {
		width: 250px;
		height: 250px;
		margin: 5em 3em;
		background-image: url("https://wiki.selfhtml.org/images/a/a9/Selflogo.png"), url("https://wiki.selfhtml.org/images/e/e8/Rainbow.jpg");
		background-repeat: no-repeat, no-repeat;
		background-position: center, center;
		box-shadow: 5px 5px 5px 0 #aaaaaa;
		background-blend-mode: normal;
	}
	
	div {
		display: inline-block;
	}
</style>
  <title>Beispiel blend-mode</title>
</head>
 
<body>
<h1>Demonstration von Blendmodi</h1>
	<main>
	
	<p>Im Frickl können Sie verschiedene Werte für background-blend-mode ausprobieren.</p>
 
  <div id="example">

  </div>
  
  <div>
  
	<h2>erlaubte Werte</h2>
  
	<ul>
		<li><code>normal</code></li>
		<li><code>multiply</code></li>
		<li><code>screen</code></li>
		<li><code>overlay</code></li>
		<li><code>darken</code></li>
		<li><code>lighten</code></li>
		<li><code>color-dodge</code></li>
		<li><code>color-burn</code></li>
		<li><code>hard-light</code></li>
		<li><code>soft-light</code></li>
		<li><code>difference</code></li>
		<li><code>exclusion</code></li>
		<li><code>hue</code></li>
		<li><code>saturation</code></li>
		<li><code>color</code></li>
		<li><code>luminosity</code></li>
	</ul>
	
  </div>
  
  <p>Bildquelle: <a href="https://commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg">commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg</a></p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_background-blend-mode.html&oldid=43855“