Fatal编程技术网
  • javascript/
  • 如何在嵌入式样式表中使用javascript变量作为背景？

如何在嵌入式样式表中使用javascript变量作为背景？

javascript html css image

如何在嵌入式样式表中使用javascript变量作为背景？,javascript,html,css,image,background,Javascript,Html,Css,Image,Background,今晚我要做的是让我的网站在每次刷新页面时加载一个随机的背景图像 在本项目的早期，我尝试让我的背景与窗口大小和屏幕分辨率进行交互，结果成功了（您可以在嵌入式样式表的“html，body”选择器中看到我的代码） 那时我只使用background1.jpg；现在，我想在几个选项之间随机切换。我在标题标签下面添加了脚本，并用一些脚本替换了body标签。这就是我现在的工作 如果我从样式表中删除了与背景相关的材料，我成功地将背景随机化，但格式会丢失，这是不可接受的。如果我像你在这里看到的那样保留它，我会保留

今晚我要做的是让我的网站在每次刷新页面时加载一个随机的背景图像

在本项目的早期，我尝试让我的背景与窗口大小和屏幕分辨率进行交互，结果成功了（您可以在嵌入式样式表的“html，body”选择器中看到我的代码）

那时我只使用background1.jpg；现在，我想在几个选项之间随机切换。我在标题标签下面添加了脚本，并用一些脚本替换了body标签。这就是我现在的工作

如果我从样式表中删除了与背景相关的材料，我成功地将背景随机化，但格式会丢失，这是不可接受的。如果我像你在这里看到的那样保留它，我会保留格式，但无法随机化。我也想吃蛋糕。我遇到了困难，任何帮助都将不胜感激

<head>
      <title>Welcome to Cuhteekaloo!</title>

      <SCRIPT LANGUAGE="JAVASCRIPT">
          var bgRand = Math.round(Math.random() * 5)
          bgOpt = new Array(6);
          bgOpt[0] = "background1.jpg";
          bgOpt[1] = "background2.jpg";
          bgOpt[2] = "background3.jpg";
          bgOpt[3] = "background4.jpg";
          bgOpt[4] = "background5.jpg";
          bgOpt[5] = "background6.jpg";
          var bgCurr = bgOpt[bgRand];
      </SCRIPT>

      <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
      <link rel="icon" type="image/jpg" href="jack.jpg"/>

      <style type="text/css">
          html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
          background: url(background1.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;}
          body  {color:white;}
          img       {border:3px white solid;}
          p     {text-align:justify;}
          a:link, a:visited {color:white;}
          a:hover, a:active {color:orange;}
          .center   {text-align:center; display:block;}
      </style>
</head>

<script language="JAVASCRIPT">
document.write('<body background="' + bgCurr + '" text="white">')
</script>


欢迎来到Cuhteekaloo！
var bgRand=Math.round（Math.random（）*5）
bgOpt=新阵列（6）；
bgOpt[0]=“background1.jpg”；
bgOpt[1]=“background2.jpg”；
bgOpt[2]=“background3.jpg”；
bgOpt[3]=“background4.jpg”；
bgOpt[4]=“background5.jpg”；
bgOpt[5]=“background6.jpg”；
var bgCurr=bgOpt[bgRand]；
html，正文{margin:0；padding:0；height:100%；overflow-y:hidden；
背景：url（background1.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；}
主体{颜色：白色；}
img{边框：3px白色固体；}
p{text align:justify；}
a:link，a:visted{color:white；}
a:悬停，a:活动{颜色：橙色；}
.center{text align:center；display:block；}
文件。写入（“”）

我讨厌小而大的问题妨碍你完成一个伟大的项目。
首先，问题在于背景变换器和随机化器

随机数发生器的问题是，
bgRand
设置为一个变量，这意味着在页面加载开始时加载一次。尝试将其变为函数：

var bgRand = function(){return Math.round(Math.random() * 5);}
      bgOpt = new Array(6);
      bgOpt[0] = "background1.jpg";
      bgOpt[1] = "background2.jpg";
      bgOpt[2] = "background3.jpg";
      bgOpt[3] = "background4.jpg";
      bgOpt[4] = "background5.jpg";
      bgOpt[5] = "background6.jpg";
      var bgCurr = bgOpt[bgRand()];
下一个问题是如何设置背景。你可以做得更简单，让你的“蛋糕”更美味。请尝试以下代码块：

document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
现在，您可以随意编写id为“body”的body标签。像这样：

<body id="body">
最后，我会给你一个叉子吃你的蛋糕（又名复制粘贴源代码）：


欢迎来到Cuhteekaloo！
var bgRand=function（）{return Math.round（Math.random（）*5）；}
bgOpt=新阵列（6）；
bgOpt[0]=“background1.jpg”；
bgOpt[1]=“background2.jpg”；
bgOpt[2]=“background3.jpg”；
bgOpt[3]=“background4.jpg”；
bgOpt[4]=“background5.jpg”；
bgOpt[5]=“background6.jpg”；
var bgCurr=bgOpt[bgRand]（）；
document.getElementById（“body”）.style.backgroundImage=“url（'”+bgCurr+”）”；
html，正文{margin:0；padding:0；height:100%；overflow-y:hidden；
背景图片：url（background1.jpg）；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
主体{颜色：白色；}
img{边框：3px白色固体；}
p{text align:justify；}
a:link，a:visted{color:white；}
a:悬停，a:活动{颜色：橙色；}
.center{text align:center；display:block；}
希望这有帮助！

函数位不起作用，但您的css很有用！如果背景图像很小或尺寸不正常（请注意，这不是我的M.O.，但我正试图找出问题），你的css在背景上提供了一个更好的焦点，而我的css覆盖了整个页面。因此，我最终做的是删除我的背景图像css属性，并将你修改后的背景相关css添加到我的背景相关css的剩余部分。这给了我理想的解决方案。这个蛋糕很好吃。 
     <head>    
            <title>Welcome to Cuhteekaloo!</title>

                  <SCRIPT LANGUAGE="JAVASCRIPT">
                      var bgRand = function(){return Math.round(Math.random() * 5);}
                      bgOpt = new Array(6);
                      bgOpt[0] = "background1.jpg";
                      bgOpt[1] = "background2.jpg";
                      bgOpt[2] = "background3.jpg";
                      bgOpt[3] = "background4.jpg";
                      bgOpt[4] = "background5.jpg";
                      bgOpt[5] = "background6.jpg";
                      var bgCurr = bgOpt[bgRand]();
    document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
                  </SCRIPT>
        <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
              <link rel="icon" type="image/jpg" href="jack.jpg"/>

              <style type="text/css">
                  html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-position: center; 
background-attachment: fixed; 
                  body  {color:white;}
                  img       {border:3px white solid;}
                  p     {text-align:justify;}
                  a:link, a:visited {color:white;}
                  a:hover, a:active {color:orange;}
                  .center   {text-align:center; display:block;}
              </style>
        </head>
    <body id="body">