Question

如果包含已注释掉的jquery库，则div不再显示背景图像。我该如何解决这个问题，所以我可以使用这个jquery库？

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
	<title>All Whole</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<!-- script src="http://code.jquery.com/jquery-1.11.3.min.js"></script -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	
	<style>
	   body, html {
         height: 100%;
         margin: 0;
       }

     .fullScreenImage {
        background-image: url('i1.jpg');
        height: 100%; 
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     }
</style>

  </head>
  <body>  
     <div  class="fullScreenImage"></div>
  </body>
</html>

＆＃13;

Answer 1

实际上这不适用于jQuery而是jQuery移动插件。 jQuery mobile依赖于jQuery库。所以，当你包括库然后jQuery移动插件激活然后插件添加自己的CSS角色等身体和装箱其他包装div等参见源代码添加在身体移动视图端口相关选择器ui - mobile-viewport ui-overlay-a和你的div也包裹data-role="page" .fullScreenImage { background-image: url(/i/welcome/i1.jpg); height: 100vh; // Changed line background-position: center; background-repeat: no-repeat; background-size: cover; }这就是为什么你失去了实际期望的原因。

如果您的屏幕显示完整的高度宽度，则应添加以下CSS：

function intersection(arrayOfArrays) {
  return arrayOfArrays.reduce(function(intersection, subArray) {
    subArray.forEach(function(number) {
      var isPresentInAll = true;
      for (var i = 0; i < arrayOfArrays.length; i++) {
        if (arrayOfArrays[i].indexOf(number) === -1) {
          isPresentInAll = false;
        }
      }
      if (isPresentInAll === true && intersection.indexOf(number) === -1) {
        intersection.push(number);
      }
    });
    return intersection;
  }, []);
}

为什么jquery似乎会干扰简单的背景图像

1 个答案: