0
ホバリングされたイメージをバックグラウンドで取得する方法は？
@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>こんにちは、私はあなたに私の現在のウェブサイトでのスニペットを与えています。それは4枚の写真と固定ヘッダーを持っています。画像の上にマウスを置くと、不透明度が変更されます（1〜> 0.8）。私の問題は、彼らもヘッダーの上に行っているということです...私はZ-インデックスを使用しようとしましたが、ヘッダーの背後にそれらを取得する方法のアイデアは、動作していないのですか？
あなたは何を意味するのですか？ – Miestiec
'z-index'要素を与えると' position'属性を持たなければなりません。 – OST
ありがとうございました：D – Miestiec