JavaScript 또는 jQuery가 좋지 않기 때문에이 배경을 흐리게하는 방법이 궁금합니다.
html {
background-image:url(image.png);
}
전체 문서를 페이드하지 않고 다른 배경 이미지로 변경하지만 2 초마다 배경 만?
나는 이것을하는 방법을 모른다. 직접 조사하고 시도했지만 지난 3 일 동안 성공하지 못했습니다.
어떤 도움이라도 대단히 감사합니다.
코드가 필요한 경우 다음과 같습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Buddies Server Home</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="nav">
<div class="header">
<img src="images/Logo.png" />
</div>
<div class="right-side">
<img src="images/home.png" />
</div>
<div class="nav-buttons">
<a href="http://192.168.2.202/server"><img src="images/buttons/servers.png" /></a>
<a href="about.php"><img src="images/buttons/about.png" /></a>
<a href="/forum/index.php"><img src="images/buttons/forums.png" /></a>
</div>
<div class="notif_container">
<div class="notif"><p id="notif">NOTIFICATION: Buddies Network is under maintenance. Thank you for your patience.</p></div>
</div>
</div>
</div>
<div class="content">
<div class="post">
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 1</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/23/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body</p></td>
</tr>
</table>
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 2</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/1337/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body - Jacob was Here</p></td>
</tr>
</table>
</div>
<div class="side_bar">
<table id="side_bar">
<tr>
<td><h2>Welcome!</h2></td>
</tr>
<tr>
<td><p>Welcome to Buddies Netowrk! Home of the Minecraft, Ace of Spades, and Team Fortress 2 server! If you want to play on one of the servers, click <a href="servers.php">here</a></p></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<b>© Buddies Network, 2012-2014.</b>
</div>
</body>
<script>
var image1 = 'images/bg.png';
var image2 = 'images/bg2.png';
function fade() {
$(html).css('background-image', image1);
$(html).css('background-image', image1);
}
</script>
</html>
styles.css
/* Document Properties */
html {
background: url('../images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Server List Properties */
.server_list {
width:500px;
height:400px;
margin: auto;
}
.server_list li {
width:60%;
margin:auto;
}
/* Font Properties */
b{
font-family:"Times New Roman", Times, serif;
}
h1{
font-family:"Times New Roman", Times, serif;
}
p{
font-family:"Times New Roman", Times, serif;
}
/* Page Template */
/* Navigation Bar*/
.header {
position:relative;
left:-1px;
}
.right-side {
position:absolute;
left:850px;
top:1px;
}
.notif {
background-color:#00FF15;
position:relative;
top:4px;
}
#notif {
color:#000000;
font-family:"Lucida Console", Monaco, monospace;
/*font-size:79%;*/
width:800px;
height:35px;
margin:auto;
position:relative;
top:10px;
overflow:auto;
word-wrap:break-word;
}
.nav {
background-color:#FFFFFF;
min-height:79px;
min-width:100%;
position:fixed;
top:0px;
left:0px;
right:0px;
}
/* Footer */
.footer {
background-color:#eee;
min-width:100%;
height:20px;
position:fixed;
left:0px;
bottom:0px;
}
/* Blog Post styles */
.post {
background-image:url('../images/trans_bg.png');
color:white;
position:absolute;
z-index:-1;
top:200px;
left:350px;
width:550px;
height:750px;
}
#post {
position:relative;
left:0px;
padding:0;
margin:0;
}
#title {
position:relative;
top:-10px;
left:0px;
}
#author {
position:relative;
top:-50px;
left:0px;
}
#body {
position:relative;
top:-80px;
left:0px;
}
/* Misc */
.side_bar {
background-image:url('../images/trans_bg.png');
color:white;
position:fixed;
top:190px;
left:5px;
width:250px;
word-wrap:break-word;
overflow:hidden;
}
/* link Properties */
a:link { color:white; }
a:visited { color:white; }
a:hover { color:white; }
a:active { color:white; }
이거 추가 해봐
jQuery(document).ready(function() {
$("html").css({
'background-image': ''
});
$("html").animate({ background:'url(image.png)'},350);
});
첫 번째 이미지 페이드 효과에만 해당됩니다. 다른 이미지에 대해이 효과를 원한다면이 플러그인 을 사용 해보고 멋진 결과물을 얻을 수있을 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다