0
Wie man Bilder in den Hintergrund versetzt?
@charset "utf-8";
html{
\t width: 100%;
\t height: 100%;
\t margin: 0;
\t padding: 0;
}
body {
\t background: #F2F2F2;
\t width: 100%;
\t height: 100%;
\t margin: 0;
\t padding: 0;
\t font-family: expresswayregular;
}
@font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
\t position: fixed;
\t background: #333333;
\t width: 100%;
\t height: 50px;
\t padding: 0;
\t margin: 0;
\t top: 0;
}
#header-content {
\t background: #333333;
\t width: 1280px;
\t height: 50px;
\t margin-left: auto;
\t margin-right: auto;
}
#logo {
\t position: absolute;
}
#currentsite-info font {
\t position: absolute;
\t height: 30px;
\t width: auto;
\t margin-left: 60px;
\t padding: 10px;
\t color: #fff;
\t font-size: 26px;
}
#search-box {
\t width: 400px;
\t height: 50px;
\t margin-right: auto;
\t margin-left: auto;
}
#search {
\t background: #fff;
\t width: 356px;
\t height: 16px;
\t margin-top: 10px;
\t margin-bottom: 10px;
\t padding: 6px;
\t border: 1px solid #fff;
\t border-radius: 6px 0 0 6px; \t
}
#submit {
\t float: right;
\t background: #fff;
\t width: 29px;
\t height: 28px;
\t margin-top: 10px;
\t margin-bottom: 10px;
\t padding: 0;
\t border-top: 1px solid #fff;
\t border-right: 1px solid #fff;
\t border-bottom: 1px solid #fff;
\t border-radius: 0 6px 6px 0; \t
}
#menu {
\t margin-right: 30px;
\t margin-left: 25px;
\t z-index: 1000;
}
.menu-linkbox a{
\t position: static;
\t float: right;
\t width: 60px;
\t height: 14px;
\t top: 0;
\t padding: 18px 15px 18px 15px;
\t color: #F2F2F2;
\t font-size: 14px;
\t text-decoration: none;
\t text-align: center;
}
.menu-linkbox:hover a {
\t color: #2997D3;
\t transition: all 500ms;
}
#menu-linkbox-live a {
\t color: #2997D3;
}
#main-content {
\t background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
\t padding-top: 50px;
\t overflow: auto;
}
#content-articles {
\t background: #F2F2F2;
\t width: 1220px;
\t bottom: 0;
\t margin: 20px;
\t padding: 10px;
\t border: 1px solid #000;
\t overflow: auto;
}
#article1 {
\t width: 550px;
\t margin: 10px;
\t float: left;
\t text-align: justify;
\t word-spacing: 4px;
}
#article1 h1 {
\t font-size: 40px;
}
#article1-content {
\t width: 100%;
}
#photo1 {
\t width: 500px;
\t height: 500px;
\t margin: 0px auto;
\t border: 2px solid #2997D3;
\t display: block;
\t transition: all 500ms;
}
#photo1:hover {
\t opacity: 0.8;
}
#article2 {
\t width: 550px;
\t margin: 10px;
\t float: right;
\t text-align: justify;
\t word-spacing: 4px;
}
#article2 h1 {
\t font-size: 40px;
}
#article2-content {
\t width: 100%;
}
#photo2 {
\t width: 500px;
\t height: 500px;
\t margin: 0px auto;
\t border: 2px solid #2997D3;
\t display: block;
\t transition: all 500ms;
\t z-index: -1000;
}
#photo2:hover {
\t opacity: 0.8;
}
#article3 {
\t width: 550px;
\t margin: 60px 10px 10px 10px;
\t float: left;
\t text-align: justify;
\t word-spacing: 4px;
}
#article3 h1 {
\t font-size: 40px;
}
#article3-content {
\t width: 100%;
}
#photo3 {
\t width: 500px;
\t height: 500px;
\t margin: 0px auto;
\t border: 2px solid #2997D3;
\t display: block;
\t transition: all 500ms;
\t z-index: -1000;
}
#photo3:hover {
\t opacity: 0.8;
}
#article4 {
\t width: 550px;
\t margin: 60px 10px 10px 10px;
\t float: right;
\t text-align: justify;
\t word-spacing: 4px;
}
#article4 h1 {
\t font-size: 40px;
}
#article4-content {
\t width: 100%;
}
#photo4 {
\t width: 500px;
\t height: 500px;
\t margin: 0px auto;
\t border: 2px solid #2997D3;
\t display: block;
\t transition: all 500ms;
\t z-index: -1000;
}
#photo4:hover {
\t opacity: 0.8;
}
#imprint {
\t background: #333333;
\t bottom: 0;
\t width: 100%;
}
#imprint-content {
\t background: #333333;
\t width: 1280px;
\t height: 150px;
\t margin: auto;
}
#about-info {
\t width: 300px;
\t height: 130px;
\t float: left;
\t margin-left: 20px;
\t padding: 10px 20px 10px 20px;
\t vertical-align: middle;
\t font-size: 18px;
\t text-align: justify;
\t color: #fff;
}
#about-info h2 {
\t text-align: center;
}
#about-info p {
\t margin: 20px;
\t text-align: center;
\t vertical-align: middle;
}
#contact-info {
\t position: static;
\t width: 300px;
\t height: 130px;
\t margin-right: auto;
\t margin-left: auto;
\t padding: 10px 20px 10px 20px;
\t vertical-align: middle;
\t font-size: 18px;
\t text-align: justify;
\t color: #fff;
}
#contact-info h2 {
\t text-align: center;
}
#contact-info p {
\t margin: 20px;
\t text-align: center;
\t vertical-align: middle;
}
#legal-info {
\t width: 300px;
\t height: 130px;
\t float: right;
\t margin-right: 20px;
\t padding: 10px 20px 10px 20px;
\t vertical-align: middle;
\t font-size: 18px;
\t text-align: justify;
\t color: #fff;
}
#legal-info h2 {
\t text-align: center;
}
#legal-info p {
\t margin: 20px;
\t text-align: center;
\t vertical-align: middle;
}
h1 {
\t color: #2997D3;
\t font-size: 20px;
\t text-align: center;
\t margin-bottom: 20px; \t
}
p {
\t margin: 20px; \t
}
a {
\t color: #2997D3;
}<!doctype html>
<html>
\t <head>
\t
\t \t <meta charset="utf-8">
\t \t
\t \t <link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
\t \t
\t \t <link rel="icon" href="images/logo_site.png">
\t \t
\t \t <title>Topics</title>
\t
\t \t <script>
\t \t \t function toggleNavPanel(x){
\t \t \t \t var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
\t \t \t \t if(panel.style.height == maxH){
\t \t \t \t \t panel.style.height = "0px";
\t \t \t \t \t navarrow.innerHTML = "▾";
\t \t \t \t }
\t \t \t
\t \t \t \t else {
\t \t \t \t \t panel.style.height = maxH;
\t \t \t \t \t navarrow.innerHTML = "▴";
\t \t \t \t }
\t \t \t }
\t \t </script>
\t
\t </head>
\t
\t <body>
\t
\t \t <div id="header">
\t \t
\t \t \t <div id="header-content">
\t \t
\t \t \t \t <img id ="logo" src="images/logo.png" />
\t \t \t \t
\t \t \t \t <div id="currentsite-info">
\t \t \t \t
\t \t \t \t \t <font>Topics</font>
\t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="menu"> \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
\t \t \t \t \t \t
\t \t \t \t \t <div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div>
\t \t \t \t \t <div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>
\t \t \t \t \t <div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="search-box">
\t \t \t
\t \t \t \t \t <form action="http://www.google.com/search" method="get">
\t \t \t
\t \t \t \t \t \t <input id="search" type="text" name="q" placeholder="Search">
\t \t \t
\t \t \t \t \t \t <input id="submit" type="image" src="images/search.png" alt="Submit">
\t \t
\t \t \t \t \t </form>
\t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t \t
\t \t <div id="main-content">
\t \t
\t \t \t <div id="content-articles">
\t \t \t
\t \t \t \t <div id="article1"> \t
\t \t \t \t
\t \t \t \t \t <div id="article1-content">
\t \t \t \t \t \t
\t \t \t \t \t \t <h1>Politics</h1>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div id="article1-photo">
\t \t \t \t \t
\t \t \t \t \t \t <a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article2"> \t
\t \t \t \t
\t \t \t \t \t <div id="article2-content">
\t \t \t \t \t \t
\t \t \t \t \t \t <h1>Healthcare</h1>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div id="article2-photo">
\t \t \t \t \t
\t \t \t \t \t \t <a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article3"> \t
\t \t \t \t
\t \t \t \t \t <div id="article3-content">
\t \t \t \t \t \t
\t \t \t \t \t \t <h1>Network</h1>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div id="article3-photo">
\t \t \t \t \t
\t \t \t \t \t \t <a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article4"> \t
\t \t \t \t
\t \t \t \t \t <div id="article4-content">
\t \t \t \t \t \t
\t \t \t \t \t \t <h1>Travel</h1>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div id="article4-photo">
\t \t \t \t \t
\t \t \t \t \t \t <a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t
\t \t </div>
\t \t
\t \t <div id="imprint">
\t \t \t
\t \t \t <div id="imprint-content">
\t \t \t
\t \t \t \t <div id="about-info">
\t \t \t \t \t \t
\t \t \t \t \t <h2>About Us</h2>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t \t Company information
\t \t \t \t \t </p>
\t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="legal-info">
\t \t \t \t \t \t
\t \t \t \t \t <h2>Legal Use</h2>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t \t Copyright information
\t \t \t
\t \t \t \t \t </p>
\t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="contact-info">
\t \t \t \t \t \t
\t \t \t \t \t <h2>Contact</h2>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t \t Contact information
\t \t \t \t \t </p>
\t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t </div> \t
\t \t </div>
\t
\t </body>
</html>Hallo Ich habe sie einen Ausschnitt mit meiner aktuellen Website. Es hat 4 Bilder und einen festen Header. Wenn Sie den Mauszeiger über das Bild bewegen, wird die Opazität geändert (1-> 0.8). Mein Problem ist, dass sie auch über den Header gehen ... Ich habe versucht, einen Z-Index zu verwenden, aber es funktioniert nicht, irgendwelche Ideen, wie man sie hinter dem Header bekommt?
Was meinen Sie? – Miestiec
Wenn Sie ein Element 'z-index' angeben, muss es ein 'position'-Attribut haben. – OST
Danke funktioniert: D – Miestiec