【发布时间】：2017-05-28 01:19:19
【问题描述】：
我正在使用流式代码：
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，但当我尝试这样做时，我得到了相同的结果。
在我看来，它的高度太小了。我使用了图像背景尺寸：封面，因为建议使用它来使背景图像具有响应性，但它不适合。
我的问题是这取决于图像的原始大小还是我做错了什么？是否有任何特定方法可以使背景真正响应？也就是说让图片背景适合不同移动设备屏幕的最大高度和宽度？
【问题讨论】：
标签： html css ruby-on-rails responsive-design background-image