我是网络开发新手我在html中创建了一个简单的单页模板，工作正常，但我想将背景颜色更改为印度国旗三色我不明白如何继续我从未使用过2-3种颜色单页
代码：
<!DOCTYPE html><html lang="en"><head> <title>Netzach’s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
<style>
body { font: 400 15px/1.8 Lato, sans-serif; color: ##ff7f00; }
h3, h4 { margin: 10px 0 30px 0; letter-spacing: 10px;
font-size: 20px; color: #228b22; }
.left{text-align: left;}
.container { padding: 80px 120px; } .person { border: 10px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; } .person:hover { border-color: #228b22; } .carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; } .carousel-caption h3 { color: #ff7f00!important; } @media (max-width: 600px) { .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ } } .bg-1 { background: #2d2d30; color: #228b22; } .bg-1 h3 {color: #ff7f00;} .bg-1 p {font-style: italic;} .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; } .list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail p { margin-top: 15px; color: #555; } .btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; } .btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; } .modal-header, h4, .close { background-color: #228b22; color: #fff !important; text-align: center; font-size: 30px; } .modal-header, .modal-body { padding: 40px 50px; } .nav-tabs li a { color: #ff7f00; } #googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; background-color: #2d2d30; border: 0; font-size: 11px !important; letter-spacing: 4px; opacity: 0.9; } .navbar li a, .navbar .navbar-brand { color: #ff7f00 !important; } .navbar-nav li a:hover { color: #fff !important; } .navbar-nav li.active a { color: #fff !important; background-color: #ff7f00 !important; } .navbar-default .navbar-toggle { border-color: transparent; } .open .dropdown-toggle { color: #fff; background-color: #ff7f00 !important; } .dropdown-menu li a { color: #000 !important; } .dropdown-menu li a:hover { background-color: red !important; } footer { background-color: #228b22; color: #228b22; padding: 32px; } footer a { color: #228b22; } footer a:hover { color: #777; text-decoration: none; } .form-control { border-radius: 0; } textarea { resize: none; }
td{border-style: groove;}
</style>
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page --> <link rel="stylesheet" type="text/css" href="engine0/style.css" /> <!--script type="text/javascript" src="engine0/jquery.js"></script--> <!-- End WOWSlider.com HEAD section --></head><body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50"><nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"><img src="" alt="Logo"></img></a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#myPage">HOME</a></li> <li><a href="#band">ABOUT US</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#Services">SERVICES <!--<span class="caret"></span>-->
</a> <!--<ul class="dropdown-menu"> <li><a href="#">Electoral</a></li> <li><a href="#">Media P.R</a></li> <li><a href="#">Legal Consultancy</a></li> <li><a href="#">Training and Development</a></li> <li><a href="#">Advertisment</a></li> </ul> -->
<li><a href="#Assignments">ASSIGNMENTS</a></li>
<li><a href="#Career">CAREER</a></li>
<li><a href="#contact">CONTACT</a></li> </li> <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li> </ul> </div> </div></nav>
<!--
<div id="wowslider-container0"> <div class="ws_images"><ul>
<li><img src="data0/images/slide1.jpg" alt="SLIDE" title="SLIDE" id="wows0_0"/></li>
<li><a href="http://wowslider.com"><img src="data0/images/slide2.png" alt="http://wowslider.com/" title="SLIDE" id="wows0_1"/></a></li>
<li><img src="data0/images/slide3.jpg" alt="slide" title="slide" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="SLIDE"><span><img src="data0/tooltips/slide1.jpg" alt="SLIDE"/>1</span></a>
<a href="#" title="SLIDE"><span><img src="data0/tooltips/slide2.png" alt="SLIDE"/>2</span></a>
<a href="#" title="slide"><span><img src="data0/tooltips/slide3.jpg" alt="slide"/>3</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">responsive slider</a> by WOWSlider.com v8.7</div> <div class="ws_shadow"></div> </div> --> <script type="text/javascript" src="engine0/wowslider.js"></script> <script type="text/javascript" src="engine0/script.js"></script> <!-- End WOWSlider.com BODY section --> <!-- Container (The Band Section) --><div id="band" class="container text-center"> <h3>About Us</h3> <p class="left">Who We are
Netzach’s in Election Research is a leading public opinion polling company
specializing in political, public affairs, public policy research and development in
India since 2007. We are empowered by state of the art research practices, managerial
acumen and best analysts. We are in research, media consultancy and strategic
communications.
We are giving out excellent analysis, which are not only significant but also
undisputed. We make unbiased projections having estimated the outcomes having
estimated the outcomes of every State and National election since our inception. Our
accuracy in local body elections is unparalleled. We project and predict the political
situation with a clear cut indication based on authentic research and survey.
We provide accurate, non – partisan, evidence based relevant data and analysis on
public opinions, government policies on the issues, attitudes and trends shaping
India and across the world.
We partner with national policy makers, government institutions, political parties,
NGO’s, Media houses, Corporate organisations to enhance their data and set of
information, as our research is focused on producing accurate data that compels
decisions to power engagement, strategy for government marketing and
communication that derives results adding value to their output.
We help in enhancing the activities of decision makers across all the vibrant sectors
of economy and politics.
What we do
Since last 10 years, Netzach’s has been helping political parties and candidates to win
tough elections, by developing and implementing innovative research methodologies
and research strategies designed for the candidates and their constituencies. We
provide a winning formula with a set of actionable ideas, thereby helping them to beat
their competitors. Owing to the dynamic nature of this wherein each constituency is
different, our approach to each constituency is also different and unique. Our
quantitative and qualitative research prowess has been established. We go all out to
aggressively help our clients formulate their goals, achievements and interests in
best possible manner. Along with providing insights achieved through our research
data, we even help our clients implement them. Our USP is that, we can offer strategic
and tactical recommendations based on our findings.
Our research output takes varied final forms such as Opinion Polls, Exit Polls,
Reports, Research Papers, Audio-Visual Programming packages for TV, Internet
Programming and Social Media dissemination. Given our ability to work in multi-
cultural environments and experience in establishing cross demographic service
delivery models. We have handled media consultancy assignments across the
country.</p> <br> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label> <input type="number" class="form-control" id="psw" placeholder="How many?"> </div> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div> <button type="submit" class="btn btn-block">Pay <span class="glyphicon glyphicon-ok"></span> </button> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel </button> <p>Need <a href="#">help?</a></p> </div> </div> </div> </div></div>
<div id="Services" class="container text-center">
<h3>Services</h3>
<div class="row">
<p>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Psephological Consultancy:</h3>
We provide solutions at every level at your doorstep. Some of them are:
<table style="border-style: dotted;" class="col-lg-12 col-md-12 col-sm-12">
<tr>
<td>Political surveys</td>
<td>Constituency profiling</td>
</tr>
<tr>
<td>Candidate positioning</td>
<td>Political party position</td>
</tr>
<tr>
<td>Opinion polls</td>
<td>Pre -Poll</td>
</tr>
<tr>
<td>Exit Poll</td>
<td>Tracking Poll</td>
</tr>
<tr>
<td>Election campaign management</td>
<td>Increase voter awareness and support</td>
</tr>
<tr>
<td>Public opinion creation</td>
<td>Bring the voter to booth</td>
</tr>
<tr>
<td>Campaign support </td>
<td>Media and social media support</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p><h3>Market Research</h3>
The skills required for stakeholder research are easily transferable towards addressing client requirements such as market assessment, preparation of concept notes, demand quantification, customer feedback and brand image building. The services are not limited by geography or the industry type. Given our experience in various elections and ready access to top consultants within India and abroad. We will be glad to offer you customized solutions for your market research.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p> <h3>Media Consultancy</h3>
From providing content outsourcing to training and set up of niche programming streams such as election programming to full fledged turnkey solutions tailored for print and electronic media. Netzach’s is your one stop shop for your consultancy needs. Not only have we successfully operated in diverse media environments such as News Agency, TV Channels, Newspapers, Magazines and Internet media, we have also delivered value to our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left"><p><h3>Socio-Economic Research</h3>
Netzach’s is proud to have partnered with academic institutions, NGOs, Independent Researchers and various Industry bodies in production of socio-economic data and research reports. Furthering the frontiers of human well being was one of the founding motives of our organization and we are proud to have done justice to the same. We encourage individuals and bodies engaged in socio-economic research to work with us. our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Qualitative Consultancy</h3>
Ever felt the need to talk to someone who understands the local polity and culture beyond what the numbers convey? Our team of highly trained analysts and consultants who have years of experience under their belt would be glad to offer you some advice. Not only do we have access to best political analysts in the business we also have a enviable network of consultants who are ready to provide niche consultancy services to our clients.
</p></div>
<div class="col-lg-6 col-md-6 col-sm-6 left"><p><h3>Public Private Partnerships</h3>
Our experience with democratic processes and formidable skill set in determining policy direction empower us to be an active partner of the host government in public-private partnership projects. Sectors such as Education, Resource mapping, Governance Surveys, Independent Evaluation and Policy assessment are some of the streams that have witnessed active Netzach’s participation or demonstrated deploy-able capability to execute the projects satisfactorily.
</p></div>
</div>
</div>
<div id="Assignments" class="container text-center">
<h3>Assignments</h3>
<div class="col-lg-12 col-md-12 col-sm-12 text-center"><h3>Recent Assignments</h3><p></p></div>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 text-center"><h3>Ongoing project</h3><p class="center">
</p></div></div>
<div id="Career" class="container text-center">
<h3>Career</h3>
<div class="col-lg-6 col-md-6 col-sm-6 left"><p><h3>Interns</h3>
Netzach’s offers college and university students a snapshot of professional life that awaits them via a limited number of internships. The selection criteria for the internships are very
stringent and we advise the students to generate a very high quality cover letter and a CV that delineates their extra-curricular and curricular activities to better help us evaluate their merits. Email us to: netzachsrnd@outlook.com
Please write "Internship" in the subject line of the mail.
We offer Opportunities for professional growth and development
Platform to express freely and multi tasking
</p></div>
<div class="col-lg-6 col-md-6 col-sm-6 left"><p><h3>Competitive package</h3>
Flexibility and learning while working experience.
</p></div></p>
<br>
</div>
<!-- Container (Contact Section) --><div id="contact" class="container"> <h3 class="text-center">Contact</h3><div class="row">
Please enter your details in the form below or email to netzachsrnd@outlook.com. We will contact you shortly.
<br/> <div class="col-md-4"> <p>Drop a Message here</p> <p><span class="glyphicon glyphicon-map-marker"></span>Mumbai, India</p> <p><span class="glyphicon glyphicon-phone"></span>Phone: 000000000</p> <p><span class="glyphicon glyphicon-envelope"></span>Email: netzachsrnd@outlook.com</p> </div> <div class="col-md-8"> <div class="row"> <div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div> </div> <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea> <br> <div class="row"> <div class="col-md-12 form-group"> <button class="btn pull-right" type="submit">Send</button> </div> </div> </div> </div> <br><br><br><br> <!--Fixed Footer--> <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <div class="navbar-text pull-left"> <p> © 2016 Netzach`s.</p> </div> </div> <br><br> </footer><script>$(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); });})</script></body></html>
答案 0 :(得分：1)
简单的解决方案，将其添加到您的CSS中。
body {
background-position: left top;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: auto 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjI1IDE1MCIgd2lkdGg9IjEzNTAiIGhlaWdodD0iOTAwIj48cmVjdCB3aWR0aD0iMjI1IiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2Y5MyIvPjxyZWN0IHdpZHRoPSIyMjUiIGhlaWdodD0iNTAiIHk9IjUwIiBmaWxsPSIjZmZmIi8+PHJlY3Qgd2lkdGg9IjIyNSIgaGVpZ2h0PSI1MCIgeT0iMTAwIiBmaWxsPSIjMTI4ODA3Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyLjUsNzUpIj48Y2lyY2xlIHI9IjIwIiBmaWxsPSIjMDA4Ii8+PGNpcmNsZSByPSIxNy41IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSByPSIzLjUiIGZpbGw9IiMwMDgiLz48ZyBpZD0iZCI+PGcgaWQ9ImMiPjxnIGlkPSJiIj48ZyBpZD0iYSI+PGNpcmNsZSByPSIwLjg3NSIgZmlsbD0iIzAwOCIgdHJhbnNmb3JtPSJyb3RhdGUoNy41KSB0cmFuc2xhdGUoMTcuNSkiLz48cGF0aCBmaWxsPSIjMDA4IiBkPSJNIDAsMTcuNSAwLjYsNyBDIDAuNiw3IDAsMiAwLDIgMCwyIC0wLjYsNyAtMC42LDcgTCAwLDE3LjUgeiIvPjwvZz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSgxNSkiLz48L2c+PHVzZSB4bGluazpocmVmPSIjYiIgdHJhbnNmb3JtPSJyb3RhdGUoMzApIi8+PC9nPjx1c2UgeGxpbms6aHJlZj0iI2MiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPjwvZz48dXNlIHhsaW5rOmhyZWY9IiNkIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+PHVzZSB4bGluazpocmVmPSIjZCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiLz48L2c+PC9zdmc+");
}<body>
<pre>
This
is
some
text...
Hello
World
</pre>
</body>
答案 1 :(得分：0)
您可以使用简单的线性渐变
background-image: linear-gradient(0deg, #138808 33%, #ffffff 33%, #ffffff 66%, #FF9933 66% );