如何在css中添加平滑过渡?

时间:2016-12-06 16:43:47

标签: html css image background

我有一些CSS代码(很明显有HTML网站)和一些javascript。我已经建立了一个测验网站,我有一个背景图片。图像重复,当它这样做时看起来很奇怪。有没有办法在重复之间添加模糊?这是我的代码:



p1 {
  font-size: 20px;
  font-family: sans-serif;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

p2, p3, p4, p5, p6, p12, p14, p16, p18, p20 {
  font-size: 18px;
  font-family: sans-serif;
  font-weight: normal;
  color: rgb(255, 255, 255);
}

p7, p8, p9, p10, p11, p13, p15, p17, p19, p21 {
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
}

body {
  background-image: url(http://cdn.wallpapersafari.com/38/17/IBsLO3.jpg);
}

<!DOCTYPE html>
<html>

<p1>Fun Apple / Microsoft Quiz - Test Your Knowledge!</p1>

<br>
<br>

<body>

<script>
function returnScore() {
    alert("Congratulations! Your final score is " + getScore() + "/10" + "! :)");
} 
 </script
 >
 <form id = "form1">

     <ul>
     <p2>Question 1. In what year was Microsoft founded?</p2>
     <br>
     <p7> <input type = "radio" name = "question0" value = "A" > 1975 <br>
     <input type = "radio" name = "question0" value = "B" > 2002 <br>
     <input type = "radio" name = "question0" value = "C" > 1983 <br>
     <input type = "radio" name = "question0" value = "D" > 1997 <br> </p7>
     </ul>

     <br>

     <ul>
     <p3>Question 2. Who were the founder(s) of Microsoft?</p3>
     <br>
     <p8> <input type = "radio" name = "question1" value = "A" > Bill Gates and Paul Allen <br>
     <input type = "radio" name = "question1" value = "B" > Michelle Obama <br>
     <input type = "radio" name = "question1" value = "C" > Steve Jobs and Ronald Wayne <br>
     <input type = "radio" name = "question1" value = "D" > Steve Wozniak <br> </p8>
     </ul>

     <br>

     <ul>
     <p4>Question 3. When did Steve Jobs pass away?</p4>
     <br>
     <p9> <input type = "radio" name = "question2" value = "A" > September 10, 2013 <br>
     <input type = "radio" name = "question2" value = "B" > June 14, 2007 <br>
     <input type = "radio" name = "question2" value = "C" > October 5, 2011 <br>
     <input type = "radio" name = "question2" value = "D" > January 2, 2001 <br> </p9>
     </ul>

     <br>

     <ul>
     <p5>Question 4. When was Apple founded?</p5>
     <br>
     <p10> <input type = "radio" name = "question3" value = "A" > September 15, 2004 <br>
     <input type = "radio" name = "question3" value = "B" > November 19, 1954 <br>
     <input type = "radio" name = "question3" value = "C" > April 1, 1976 <br>
     <input type = "radio" name = "question3" value = "D" > August 4, 1999 <br> </p10>
     </ul>

     <br>

     <ul>
     <p6>Question 5. Who developed smartphones before - Apple or Microsoft?</p6>
     <br>
     <p11> <input type = "radio" name = "question4" value = "A" > Apple <br>
     <input type = "radio" name = "question4" value = "B" > Microsoft <br> </p11>
     </ul>

     <br>

     <ul>
     <p12>Question 6. Why is the company named "Apple?"</p12>
     <br>
     <p13> <input type = "radio" name = "question5" value = "A" > Steve Jobs liked apples <br>
     <input type = "radio" name = "question5" value = "B" > Apples are the Lords of Earth <br>
     <input type = "radio" name = "question5" value = "C" > Because it comes before Atari in the phone book <br> </p13>
     </ul>

     <br>

     <ul>
     <p14>Question 7. True or False: The Microsoft start-up sound was made by Brian Eno.</p14>
     <br>
     <p15> <input type = "radio" name = "question6" value = "A" > False <br>
     <input type = "radio" name = "question6" value = "B" > True <br> </p15>
     </ul>

     <br>

     <ul>
     <p16>Question 8. True or False: Microsoft was originally intended to be called "Micro-Soft".</p16>
     <br>
     <p17> <input type = "radio" name = "question7" value = "A" > False <br>
     <input type = "radio" name = "question7" value = "B" > True <br> </p17>
     </ul>

     <br>

     <ul>
     <p18>Question 9. True or False: Bill Gates wanted to name the company Interfance Manager.</p18>
     <br>
     <p19> <input type = "radio" name = "question8" value = "A" > False <br>
     <input type = "radio" name = "question8" value = "B" > True <br> </p19>
     </ul>

     <br>

     <ul>
     <p20>Question 10. True or False: If Apple was a country, it would be the world's most populated.</p20>
     <br>
     <p21> <input type = "radio" name = "question9" value = "A" > False <br>
     <input type = "radio" name = "question9" value = "B" > True <br> </p21>
     </ul>

     </form>
     <button onclick = "javascript: returnScore()" > View Your Results! </button>

     <script type = "text/javascript">
         var userInput = [];

var answers = []
answers[0] = "A";
answers[1] = "A";
answers[2] = "C";
answers[3] = "C";
answers[4] = "B";
answers[5] = "A";
answers[6] = "B";
answers[7] = "B";
answers[8] = "B";
answers[9] = "A";

function getScore() {
     var score = 0;
     var numQuestions = 10;
     var form = document.getElementById('form1');

     userInput[0] = form1.question0.value;
     userInput[1] = form1.question1.value;
     userInput[2] = form1.question2.value;
     userInput[3] = form1.question3.value;
     userInput[4] = form1.question4.value;
     userInput[5] = form1.question5.value;
     userInput[6] = form1.question6.value;
     userInput[7] = form1.question7.value;
     userInput[8] = form1.question8.value;
     userInput[9] = form1.question9.value;

     for (var i = 0; i < numQuestions; i++) {

          if (userInput[i] == answers[i]) {
               score += 1;
          } else {
               score += 0;
          }

     }
     return score;
}

</script>

</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案