배경 이미지가 흐려지지 않습니다.

배경 이미지가 왜 희미 해지지 않는지 알아 내려고 노력했습니다. CSS/jquery와 w3 경로를 사용해 보았습니다. 백그라운드 이미지가 실제로 표시되고 jquery 코드가 body 태그 내부에 중첩 된 태그에 실제로 작동하는지 확인했습니다. 다른 게시물을 읽었지만 도움이되지 않습니다.배경 이미지가 흐려지지 않습니다.

$(document).ready(function(){ 
 
    $("body").hide().fadeIn(3000); 
 
});

body { 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-image: url('../images/index.jpeg'); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>TITLE</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<link rel="stylesheet" type="text/css" href="css/styles.css"> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="scripts/myScript.js"></script> 
 
</head> 
 

 

 
<body> 
 

 

 
</body> 
 
</html>

출처

2017-09-11 user3871288

'hide()'를 제거한 후에 시도해보십시오. '$ ("body")처럼. fadeIn (3000);' –

그냥 시도했지만 작동하지 않습니다. – user3871288

CSS/jquery가 충돌하는 경우 확실하지 않음 – user3871288

$(document).ready(function() { 
 
    $("body").hide().fadeIn(3000); 
 
});

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
div{ 
 
    width:100%; 
 
    height: 100vh; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/009/940.jpg'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>

출처

2017-09-11 05:39:07

왜이 기능이 작동합니까? – user3871288

나는 잘 모르겠다.하지만 body 태그가 작동하지 않을 것이라고 생각한다. .. –

@ user3871288 페이드는 바디에서 작동하고있다. 바디 내의 모든 내용은 페이드 인된다. 배경 이미지는 div 안에있다. 페이드 인하는 배경 이미지가 아닙니다. 전에 body 태그를 시도했지만 작동하지 않기 전에 – XYZ

당신은 사용할 수 있습니다 setTimout

$(document).ready(function(){ 
 
    setTimeout(function() { 
 
    $("body").css("background-image", "url('https://s13.favim.com/orig/170403/aesthetic-forest-nature-photography-Favim.com-5145568.png')"); 
 
}, 2000); 
 
});

body { 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>just text here</p>

출처

2017-09-11 05:33:31 ab29007

배경 이미지가 흐려지지 않습니다.

답변

관련 문제