Question

我正在使用floowing代码：

application.html.erb文件：

<!DOCTYPE html>
<html>
<head>
<title>Rubiksolutions</title>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div>
<nav>
<div class="cube"></div>
    <div id="nav_wrapper">
    <ul>
        <li><%=image_tag("name.jpg", :size => "150x40")%></li>
        <li><a>Inicio</a></li>
        <li class="submenu"><a>Productos</a>
            <ul class="drop-menu menu-1">
                 <li>una</li>
                 <li>dos</li>
                 <li>tres</li>
                 <li>cuatro</li>
                 <li>cinco</li>
                 <li>seis</li>
            </ul>
        </li>
        <li class="submenu"><a>Servicios</a>
            <ul class="drop-menu menu-2">
                 <li>una</li>
                 <li>dos</li>
                 <li>tres</li>
                 <li>cuatro</li>
                 <li>cinco</li>
                 <li>seis</li>
            </ul>
        </li>
        <li class="submenu"><a>Educación</a>
            <ul class="drop-menu menu-3">
                 <li>una</li>
                 <li>dos</li>
                 <li>tres</li>
                 <li>cuatro</li>
                 <li>cinco</li>
                 <li>seis</li>
            </ul>
        </li>
        <li><a>Contáctanos</a></li>
    </ul>
    </div>
    <div class="container" id="btn-menu" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
    <div id="logo-image">
    <%=image_tag("name.jpg", :size => "150x40")%>
    </div>
</nav>
</div>

<%= yield %>

</body>
</html>

这是我的home.html.erb文件：

<section>
<div id="particles-js"></div>
</section>
<div class="bender" id="bender2">
<div class="head">
<div class="antenna">
  <div class="antenna-circle"></div>   
  <div class="antenna-triangle"></div>
  <div class="antenna-base"></div>
</div>  
<div class="eyes">
  <div class="curve--left"></div>
  <div class="curve--right"></div>
  <div class="eyes-subcontainer">        
    <div class="eye eye--left">
      <div class="pupil"></div>
    </div>
    <div class="eye eye--right">
      <div class="pupil"></div>
    </div>        
  </div>
</div>
<div class="mouth">
  <ul class="tooth--vertical">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <span class="tooth--horizontal tooth-horizontal1"></span>
  <span class="tooth--horizontal tooth--horizontal2"></span>     
</div>
</div>
</div>

这是我的main.Js文件：

$(document).ready(function(){

 console.log("Loading particles.js");

 particlesJS('particles-js',
  {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "onresize": {
        "enable": true,
        "density_auto": true,
        "density_area": 400 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
    }
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
    },
    "retina_detect": true,
    "config_demo": {
    "hide_card": false,
    "background_color": "#b61924",
    "background_image": "",
    "background_position": "50% 50%",
    "background_repeat": "no-repeat",
    "background_size": "cover"
   }
   }
   );
   });
var state= false;
$(function(){
$(".cube")
    .cube({size:{width:50,height:50}})
    .execute("x (R' U R') D2 (R U' R') D2 (R U R') D2 (R U' R') D2 (R U R') D2 (R U' R') D2 R2 x'");
});
function myFunction(x) {
x.classList.toggle("change");
if (!state){
  $("#nav_wrapper").css('transform', 'translateX(0%)');
  state = true;
}
else{
  $("#nav_wrapper").css('transform', 'translateX(-150%)'); 
  state = false;
}
};

这是我的CSS文件的一部分：

* {
margin: 0;
padding: 0;
}

#particles-js {
  display:block;
  vertical-align:bottom;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:1;
  -webkit-transition:opacity .8s ease,-webkit-transform 1.4s ease;
  transition:opacity .8s ease, transform 1.4s ease;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image: image-url("rub.jpg");
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:cover;
 }

nav {
  position:fixed;
  left:50%;top:0;
  z-index: 9999;
  margin-top: 25px;
  margin-left:-40%; /* negative margin equal to half the width */
  width:80%;
  height:60px;
  background:#hhh;
  opacity: 0.7;
  filter: alpha(opacity=70);
  border-radius: 5px;
}

正如你所看到的，我并没有塑造身体的css，但是当我尝试这样做时，我得到的结果相同。

在我看来，身高太小了。我使用了图像背景大小：封面，因为它是建议使背景图像响应但不适合的。

我的问题是，它是否取决于图像的原始大小或我做错了什么？如果有任何具体方法使背景真正响应？换句话说，使图像背景适合不同移动设备的屏幕的最大高度和宽度？

Answer 1

您可以尝试提供

#particles-js{
height:100vh;
}

它肯定会起作用，而不是给予它100％的收益。

Answer 2

我认为你的问题是你使用身高的方式。你已经将＃粒子-js的高度设置为100％......但是100％的是什么？尝试添加：

html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

然后添加：

background-image: image-url("rub.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;

Answer 3

你的CSS中有一些错误，所以可能先修复它们。

第19行

background-image: image-url("rub.jpg");

到

background-image: url("rub.jpgf");

第25行

background-position:cover;

语法无效，位置的正确值是右上角或50％50％

等选项

第36行的颜色无效

  background:#hhh;

与粒子js的敏感背景图象

3 个答案: