个人中心
gpt4 book ai didi

html - 带有粒子 js 的响应式背景图像

转载 作者：行者123 更新时间：2023-11-28 04:33:31 30 4
gpt4 key购买 nike

我正在使用下面的代码:

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;
}

如您所见，我没有塑造 body css，但当我尝试这样做时，我得到了相同的结果。

Result of code

在我看来，它的高度太小了。我使用了图片 background-size: cover，因为这是使背景图片响应的建议，但它不太适合。

我的问题是它是否取决于图像的原始大小或者我做错了什么？是否有任何特定方法可以使背景真正响应？换句话说就是让图片背景适应不同移动设备屏幕的最大高度和宽度？

最佳答案

你可以试试给

#particles-js{
height:100vh;
}

与其给它 100%，它肯定会起作用。

关于html - 带有粒子 js 的响应式背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41621559/

30 4 0
文章推荐： javascript - 如何使 div/popup 在浏览器中显示一次。普通的 Vanilla 脚本
文章推荐： java - Android:将字符串格式化为 html - 添加新行
文章推荐： c++ - 如何使用没有返回值的 (eigen) unaryExpr 和 lambda 函数？
文章推荐： c++ - QGraphicsPixmapItem 不显示在 QGraphicsView 中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com