﻿<html lang="zh-cn">

	<head>
	
		<title>背景生成器 - 免费在线创建和生成随机的超大背景图片</title>
		<meta name="Robots" content="index,follow" />
		<meta name="description" content="Background Generator（BgGenerator）是一个免费的在线图像生成器，它使用好几种不同的模板和样式来生成独特的创意超大分辨率图片，可以很好的帮助设计师来快速解决问题。" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="canonical" href="https://bggenerator.com/main.css" />
		<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="favicon/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
	<link rel="manifest" href="favicon/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
		
		
		<link rel="stylesheet" href="assets/css/main.css" />

<style>
		#headerToggle .toggle:before {
						text-decoration: none;
						
						content: '\f013\00A0点我设置';
						color: #fff;
						font-size: 18px;
						background: rgba(128, 136, 144, 0.5);
						border-radius: 0.35em;
						text-align: center;
						position: absolute;
						left: 0.5em;
						top: 0.5em;
						display: block;
						width: 7.25em;
						height: 2.25em;
						line-height: 2.25em;
					}
		</style>			
		
		<style>
		#headerToggle .toggle:before {
						text-decoration: none;
						
						content: '\f013\00A0点我设置';
						color: #fff;
						font-size: 18px;
						background: rgba(128, 136, 144, 0.5);
						border-radius: 0.35em;
						text-align: center;
						position: absolute;
						left: 0.5em;
						top: 0.5em;
						display: block;
						width: 7.25em;
						height: 2.25em;
						line-height: 2.25em;
					}
		</style>			
		
		<style>
			
			::selection
			{
				background: rgba(0, 0, 0, 0.5);
				color: white;
			}
			::-moz-selection
			{
				background: rgba(0, 0, 0, 0.5);
				color: white;
			}

			canvas.canvasMain, img#canvasImage
			{
				
				display: block;
				border: 1px;
				background-color: rgba(255, 255, 255, 1);
				width: 50%;
				height: 50%;
				box-shadow:0 0 15px #000;
			}
			
			
			img#canvasImage
			{
				
				z-index: 2;
			}

			#information
			{
				
				font-size:0.6em;
				padding-right: 5px;
				z-index: 4;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
				border-right: 1px solid rgba(0, 0, 0, 0.2);
				line-height: 1em;
			}
			

			#settings
			{
				
				font-size: 1 em;
				line-height: 2em;
				background-color: rgba(0, 0, 0, 0.5);
				color: "#000";
				
				padding: 5px;
				z-index: 3;
			}
			
			#navs
			{
				font-size:0.8em;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				padding: 5px;
				z-index: 1;
			}
			
			input{text-align: center;}
			
			input[type=number]
			{
				font-size: 1em;
				width: 30%;
				height: 1.5em;
				line-height:0.8em;
				
			}
			
			label
			{
				margin-right: 7px;
			}
			select
			{
				font-size: 1em;
				height: 1.5em;
			}
			
			
			input[type=range] {
			  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
			  width: 50%; /* Specific width is required for Firefox. */
			  background: transparent; /* Otherwise white in Chrome */
			}
			
			input[type=range]::-webkit-slider-thumb {
			  -webkit-appearance: none;
			}
			
			input[type=range]:focus {
			  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
			}
			
			input[type=range]::-ms-track {
			  width: 100%;
			  cursor: pointer;
			
			  /* Hides the slider so custom styles can be added */
			  background: transparent; 
			  border-color: transparent;
			  color: transparent;
			}
			
			input[type=range]::-webkit-slider-runnable-track {
			  width: 100%;
			  height: 0.3em;
			  cursor: pointer;
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			  background: #666;
			  border-radius: 1.3px;
			  border: 0.2px solid #010101;
			}
			
			input[type=range]:focus::-webkit-slider-runnable-track {
			  background: #666;
			}
			
			input[type=range]::-moz-range-track {
			  width: 100%;
			  height: 0.3em;
			  cursor: pointer;
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			  background: #3071a9;
			  border-radius: 1.3px;
			  border: 0.2px solid #010101;
			}
			
			input[type=range]::-ms-track {
			  width: 100%;
			  height: 0.3em;
			  cursor: pointer;
			  background: transparent;
			  border-color: transparent;
			  border-width: 16px 0;
			  color: transparent;
			}
			input[type=range]::-ms-fill-lower {
			  background: #2a6495;
			  border: 0.2px solid #010101;
			  border-radius: 2.6px;
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			}
			input[type=range]:focus::-ms-fill-lower {
			  background: #3071a9;
			}
			input[type=range]::-ms-fill-upper {
			  background: #3071a9;
			  border: 0.2px solid #010101;
			  border-radius: 2.6px;
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			}
			input[type=range]:focus::-ms-fill-upper {
			  background: #367ebd;
			}
			
			  /* Special styling for WebKit/Blink */
			input[type=range]::-webkit-slider-thumb {
			  -webkit-appearance: none;
			  border: 1px solid #000000;
			  height: 1.8em;
			  width: 16px;
			  border-radius: 3px;
			  background: #506262;
			  cursor: pointer;
			  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
			}
			
			/* All the same stuff for Firefox */
			input[type=range]::-moz-range-thumb {
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			  border: 1px solid #000000;
			  height: 1.6em;
			  width: 16px;
			  border-radius: 3px;
			  background: #ffffff;
			  cursor: pointer;
			}
			
			/* All the same stuff for IE */
			input[type=range]::-ms-thumb {
			  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
			  border: 1px solid #000000;
			  height: 1.8em;
			  width: 16px;
			  border-radius: 3px;
			  background: #ffffff;
			  cursor: pointer;
			}
			
			/* SVG 黑白预览 */
			
			.gray { 
			    -webkit-filter: grayscale(100%);
			    -moz-filter: grayscale(100%);
			    -ms-filter: grayscale(100%);
			    -o-filter: grayscale(100%);
			    
			    filter: grayscale(100%);
				
			    filter: gray;
			}
			
			
		</style>
		
		
		<script src="js/cpick.js"></script>
		
		
	<script data-ad-client="ca-pub-2854754261691086" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
	<body class="is-preload">

		<!-- Header -->
			<div id="header">

				<div class="top">

					<!-- Logo -->
						<div id="logo">
							<span class="image avatar48"><img src="images/avatar.jpg" alt="Background Generator" style="border: 0px" /></span>
							<h1 style="word-wrap:break-word;" id="title">色色背景生成器</h1>
							<h6><a href="index.php">BgGenerator.com</a></h6>
							<p id="pb"><strong>载入中...</strong></p>
							
						</div>

					<!-- Nav -->
					
					
					
						<div id="settings">
							
								
							
							 <button id="genbutton" onClick="gen();" style="font-weight:bold;font-size:1em"><img src="images/gen.png" alt="Generate a Background Image" /> 立刻生成</button></br>
							 <a href="#howtouse" style="font-size:12px">[帮助？]</a>&nbsp;
							 <b style="color:#fff"><a id="clear" style="cursor:pointer;font-size:14px;text-decoration:none;"><img src="images/clean.png" width="14px" alt="Clean the drawing" /> 清空</a></b>&nbsp;
							<a id="undo" onClick="undo();" style="cursor:pointer;font-size:14px;text-decoration:none;"><img src="images/undo.png" width="14px" alt="Undo the drawing" /> 撤消</a>&nbsp;
								<a id="undo" onClick="redo();" style="cursor:pointer;font-size:14px;text-decoration:none;"><img src="images/redo.png" width="14px" alt="Redo the drawing" /> 重做</a>
							</br>
							<div id="bgtypediv" style="display:none">
								<label for="bgtype">Background Type</label>
									<select id="bgtype" style="width: 50%" onChange="bgtypeChange()">
									<option value="colorful">Colorful</option>
									<option value="graphics">Graphics</option>
									<option value="galaxy">Galaxy</option>
									<option value="thunder">Changing Light</option>
								</select>
								<br>
							</div>
							<label for="presetsize">图片尺寸</label>
							<select id="presetsize" onChange="sizeChange()">
								<option value="1920x1080">1920x1080(Full HD)</option>
								<option value="1280x720">1280x720 (HQ)</option>
								<option value="4096x2160">4096x2160 (4K)</option>
								<option value="1920x1200">1920x1200 (16:10)</option>
								<option value="1440x900">1440×900 (16:10)</option>
								<option value="1456x180">1456x180 (Banner)</option>
<option value="1024x1024">1024x1024 (Logo)</option>
								<option value="2970x2100">2970x2100 (A4)</option>
								<option value="1125x2436">1125x2436 (iPhoneX)</option>
								<option value="1242x2688">1242x2688 (iPhoneXS)</option>
								<option value="828x1792">828x1792 (iPhoneXR)</option>
								<option value="1024x1366">1024x1366 (iPad Pro)</option>
								<option value="768x1024">768x1024 (iPad)</option>
								<option value="1080x2160">1080x2160 (18:9 Phone)</option>
								<option value="1440x2560">1440x2560 (16:9 Phone)</option>
<option value="customize">自定义</option>
								
							</select></br>
							
								<input id="imageWidthInput" type="number" onclick="sizeClick()" onchange="sizeChange()" pattern="[0-9]*" value="1920"> X <input id="imageHeightInput" onchange="sizeChange()" onclick="sizeClick()" type="number" pattern="[0-9]*" value="1080"> </br>
							
							<label>透明度</label>
							<select id="trans" onChange="transChange()">
								<option value="opaque">不透明</option>
								<option value="transparent">透明</option>
								
							</select></br>
							<div id="bgcolordiv" style="">
								<label for="bgpicker">背景色</label>|<input id="bgcolor" value="FFF" class="jscolor" style="width:65px;height:1.6em;" />|</br>
							</div>
							<label>颜色类型</label>
							<select id="colortype" onChange="colorTypeChange()">
								<option value="color">随机颜色</option>
								<option value="customcolor">自定义颜色</option>
								
							</select></br>
							<div id="fcolordiv" style="display:none">
								<label for="fpicker">颜色</label>|<input id="fcolor" value="72C4F3" class="jscolor" style="width:65px;height:1.6em;" />|</br>
								<label for="fpicker">渐变范围</label><input id="grange" type="range" min="1" max="120" step="1" value="30"></br>
								
							</div>
							
							<div>
							<label for="globalAlpha">透明度</label><input id="globalAlpha" type="range" min="0" max="1" step="0.01" value="0.2"></br>
							
							
							<div id="shapediv">
								
								
								<label>形状</label>
								<select id="shape" onChange="selectChange()">
									<option value="circle">圆形</option>
									
									<option value="triangle">三角形</option>
									<option value="rectangle">方块</option>
									<option value="spray">喷出</option>
									
								</select>
								<br>
								<label for="amount">形状数量</label><input id="amount" type="number" value="20"></br>
							</div>
							<div id="shapesize">
								<label for="radius">最大形状尺寸</label><input id="radius" type="number" value="700"></br>
							</div>
							
							
							<div id="randomdiv" style="display:none">
								<img id="imgicon" src="images/shape.png" alt="Draw Shapes" class="gray" style="background:#fff;" width="14px"></img><label>Graphics</label>
								<select style="display:none" id="shapegraphics" onChange="shapegraphicsChange()">
									
									
									<!--==============add below=================== -->
									<option value="3shapes">3shapes</option>
									
	
	
								</select>
								</br>
							
							
								<label>Random Position</label>
								<select style="font-size:18px" id="randomPos" onChange="randomPosChange()">
									<option value="yes">Yes</option>
									<option value="no" selected>No</option>
									
									
								</select>
								 </br>
								<label>Repeated Background</label>
								<select style="font-size:18px" id="repeatedBackgound" onChange="repeatedBgChange()">
									<option value="yes" selected>Yes</option>
									<option value="no">No</option>

								</select>
								</br>
							</div>
							
							
							
							<a id="starttext" onClick="startText();" style="font-weight:bold;cursor:pointer;text-decoration:none;"><img src="images/addtext.png" width="14px" alt="add text to the background image"/> 添加文字>></a>
						
							<div id="addtextdiv" style="display:none">
								
								<label for="addtext">文本</label><input id="addtext" value="" style="width:65%;height:1.6em;" />
								
								</br>
								<button id="textbutton" onClick="addText();"><img src="images/addtext.png" width="12px" alt="add text to the background image"/> 添加文字</button>							
								<button onClick="undo();"><img src="images/undo.png" width="12px" alt="Undo the drawing" /> 撤消</button>
								</br>
								
								<label for="textfontSelect">字体</label>
								
								<select id="textfontSelect" onChange="textfontchange()"  style="width:4em;height:1.6em;" />
									<option value="Arial" style="font-family:Arial">Arial</option>
									<option value="Arial Black" style="font-family:Arial Black">Arial Black</option>
									<option value="Times New Roman" style="font-family:Times New Roman">Times New Roman</option>
									<option value="Times" style="font-family:Times">Times</option>
									<option value="Tahoma" style="font-family:Tahoma">Tahoma</option>
									<option value="Verdana" style="font-family:Verdana">Verdana</option>
									<option value="Helvetica" style="font-family:Helvetica">Helvetica</option>
									<option value="MS Sans Serif" style="font-family:MS Sans Serif">MS Sans Serif</option>
									<option value="MS Serif" style="font-family:MS Serif">MS Serif</option>
									<option value="Fantasy" style="font-family:Fantasy">Fantasy</option>
									<option value="Courier" style="font-family:Courier">Courier</option>
									<option value="sans-serif" style="font-family:sans-serif">sans-serif</option>
									<option value="Comic Sans MS" style="font-family:Comic Sans MS">Comic Sans MS</option>
									<option value="cursive" style="font-family:cursive">cursive</option>
									<option value="Courier New" style="font-family:Courier New">Courier New</option>
									<option value="monospace" style="font-family:monospace">monospace</option>
									<option value="Georgia1" style="font-family:Georgia1">Georgia1</option>
									<option value="serif" style="font-family:serif">serif</option>
									<option value="Impact" style="font-family:Impact">Impact</option>
									<option value="Symbol" style="font-family:Symbol">Symbol</option>
									<option value="Webdings" style="font-family:Webdings">Webdings</option>
									<option value="Wingdings" style="font-family:Wingdings">Wingdings</option>
									<option value="Lucida Console" style="font-family:Lucida Console">Lucida Console</option>
									<option value="Monaco" style="font-family:Monaco">Monaco</option>
									<option value="Lucida Sans Unicode" style="font-family:Lucida Sans Unicode">Lucida Sans Unicode</option>
									<option value="Lucida Grande" style="font-family:Lucida Grande">Lucida Grande</option>
									<option value="Palatino Linotype" style="font-family:Palatino Linotype">Palatino Linotype</option>
									<option value="Book Antiqua" style="font-family:Book Antiqua">Book Antiqua</option>
									<option value="Palatino" style="font-family:Palatino">Palatino</option>
									<option value="Geneva" style="font-family:Geneva">Geneva</option>
									<option value="Trebuchet MS" style="font-family:Trebuchet MS">Trebuchet MS</option>
									<option value="New York" style="font-family:New York">New York</option>
									<option value="Roboto" style="font-family:Roboto">Roboto</option>
									<option value="Candara" style="font-family:Candara">Candara</option>
									<option value="Garamond" style="font-family:Garamond">Garamond</option>
									<option value="Century Schoolbook" style="font-family:Century Schoolbook">Century Schoolbook</option>
									<option value="Andale Mono" style="font-family:Andale Mono">Andale Mono</option>
									
									<option value="Customize">自定义...</option>
									
								</select>
								</br>
								
								<div id="textfontdiv" style="display:none"><input id="textfont" value="Arial" style="width:4em;height:1.6em;" /><br></div>

								<label for="fontsize">字号（px）</label><input id="fontsize" value="120" style="width:4em;height:1.6em;" /></br>
									
								<label for="fontstyle">字体样式</label>
								<select id="fontstyle">
									<option value="normal">Normal</option>
									<option value="bold" style="font-weight:bold">Bold</option>
									<option value="italic" style="font-style:italic">Italic</option>
									<option value="bi" style="font-style:italic;font-weight:bold;">Bold & Italic</option>
								</select>
								</br>
								
								<label for="textpos">文字位置</label>
								<select style="font-size:18px" id="textpos">
								<option value="center">中央</option>
								<option value="topcenter">顶部中心</option>
								<option value="bottomcenter">底部中心</option>
								<option value="leftcenter">左中心</option>
								<option value="rightcenter">右中心</option>
								
								<option value="topleft">左上角</option>
								<option value="topright">右上角</option>
								
								<option value="bottomleft">左下角</option>
								<option value="bottomright">右下角</option>
								
							</select>
							</br>
							<label for="textcolor">文字颜色</label>|<input id="textcolor" value="ffffff" class="jscolor" style=" width:4em;height:1.6em;" />|</br>
							<label for="textalpha">文字透明度</label><input id="textalpha" type="range" min="0" max="1" step="0.01" value="1"></br>
							<label for="textpadding">边距（px）</label><input id="textpadding" value="20" style="width:2em;height:1.6em;" ></br>
								
								<hr>
								
							<label for="textshadow">文字阴影</label>
							<select style="font-size:18px" id="textshadow">
								<option value="none">无</option>
								
								<option value="topcenter">顶部</option>
								<option value="bottomcenter">底部</option>
								<option value="leftcenter">左边</option>
								<option value="rightcenter">右边</option>
								
								<option value="topleft">左上</option>
								<option value="topright">右上</option>
								
								<option value="bottomleft">左下</option>
								<option value="bottomright" selected>右下</option>
								<option value="center">中央</option>
							</select>
							<br>
							<label for="shadowcolor">阴影颜色</label>|<input id="shadowcolor" value="000000" class="jscolor" style="width:4em;height:1.6em;" />|</br>
							<label for="shadowdistance">阴影距离（px）</label><input id="shadowdistance" value="5" style="width:4em;height:1.6em;" /></br>
							<label for="shadowblur">阴影模糊</label><input id="shadowblur" value="5" style="width:4em;height:1.6em;" /></br>
							
								
								
							<label for="strokelinewidth">线宽</label><input id="strokelinewidth" value="0" style="width:4em;height:1.6em;" /></br>
								<label for="stroke">文字描边</label>
							<select style="font-size:18px" id="stroke">
								<option value="yes">是</option>
								<option value="no" selected>否</option>
								
								
							</select>
							</br>
							<label for="strokecolor">描边颜色</label>|<input id="strokecolor" value="000000" class="jscolor" style="width:4em;height:1.6em;" />|</br>
							<label for="composite">混合模式</label>
							<select style="font-size:18px" id="composite">
								<option value="source-over">Source-over</option>
								<option value="lighter">Lighter</option>
								
								
							</select>
							
							
						</div>
							
							
						</div>

							

						</div>

				<div class="bottom">
					<div id="information">
								
								<p>
									
									图片尺寸： <span id="imageWidthInformation">0</span> X <span id="imageHeightInformation">0</span> 像素。 </br>显示缩放比例： <span id="displayScaling"></span>
									</br>
									<i id="info"></i>
								</p>
								
								
						</div>
					<!-- Social Icons -->
					
						<ul style="font-size:12px" align="center">
							
							<a href="zh-cn.php">主页</a>&nbsp;&nbsp;&nbsp;
							<a href="desktop.html">Desktop Version</a>&nbsp;&nbsp;&nbsp;
							
							
							<a href="mailto:admin@@bggenerator.com">联系</a>
						</ul>

				</div>

			</div>
		</div>
		<!-- Main -->
			<div id="main">

				<!-- Intro -->
					<section id="top" class="one dark cover">
						
					
						<div align="center">
							<i id="ie" style="display:none">Your Current Browser Internet Explorer not Compatible with BgGenerator.com.<br> Please use <b style="color:#fff">Chrome, FireFox or Edge</b> to get the Best User Experience.<br>
								 Or <a href="down/bggenerator.exe"><b style="color:#fff">Download the Desktop Version</b></a> to use.<br>
								<a class="button" href="down/bggenerator.exe">Download the Desktop Version</a>
								<br><br>  
								</i>
							
						<div style="background:rgba(34,38,41,0.4);font-size:12px;color:#fff;" id="toppage">
							<a href="index.php" style="color:#fff;">English</a> &nbsp;
	               <a href="de.php" style="color:#fff;">Deustch</a> &nbsp;
	                <a href="fr.php" style="color:#fff;">Français</a> &nbsp;
	                <a href="it.php" style="color:#fff;">Italiano</a> &nbsp;
<a href="tr.php" style="color:#fff;">Türk</a> &nbsp;
	                <a href="es.php" style="color:#fff;">Español</a> &nbsp;
	                <a href="nl.php" style="color:#fff;">Dutch</a> &nbsp;
	                <a href="pt.php" style="color:#fff;">Português</a> &nbsp;
	                <a href="pl.php" style="color:#fff;">Polski</a> &nbsp; 
	                <a href="zh-cn.php" style="color:#fff;">简体中文</a> &nbsp;
	                <a href="zh-tw.php" style="color:#fff;">繁體中文</a> &nbsp;
	                <a href="jp.php" style="color:#fff;">日本語</a> &nbsp;
	                <a href="kr.php" style="color:#fff;">한국어</a>
					</div>
							<span>选择图像样式：</span>  
							<a href="zh-cn.php" style="font-weight:bold;">炫彩</a> | 
							<a href="graphics_background_zh-cn.php">图形</a> | 
							<a href="galaxy_background_zh-cn.php">星系</a> | 
							<a href="changing_light_background_zh-cn.php">光变换</a> | 
							<a href="poly_background_zh-cn.php">多边形</a> | 
							<a href="dream_background_zh-cn.php">梦幻</a> | 
							<a href="bars_background_zh-cn.php">条纹</a> 
							
							</br></br>
							</div>
						
						<div class="container" align="center">
							
							
<div style="width:100%" align="center">
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BGGenerator-Banner -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2854754261691086"
     data-ad-slot="4999545934"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>		
</div>
<img id="canvasImage" style="display:none"></img>
							<main style="visibility:hidden">
							<canvas id="canvas" class="canvasMain" style="z-index:-1;position:absolute;left:0px; top:0px;">Your browser does not support the canvas element.</canvas>
						</main>
							<canvas id="ocanvas" style="cursor:pointer;" onclick="gen()" class="canvasMain">Your browser does not support the canvas element.</canvas>

						
							<footer style="margin-top:15px">
								<span id="toolbuttons">
								
								<button id="playpause" onClick="play()">暂停并保存</button> <button id="nextimage" onClick="nextdo()">演化下一张图片</button>
							</span>
							<span id="savebuttons">
								<a href="#" id="downloadbuttonJPG" ><button>另存为JPG</button></a> <a href="#" id="downloadbuttonPNG" ><button>另存为PNG</button></a> <a style="cursor: pointer;" id="donate" onclick="donateShow()"><button>捐赠</button></a>
								
							</span>
							
								</br>
							</footer>
<script>
								function donateShow()
								{
									document.getElementById("donatediv").style.display="";
								}
								function donateHide()
								{
									document.getElementById("donatediv").style.display="none";
								}
								</script>
						<div id="donatediv" style="width:50%;display:none;">
							<br>
							
							<div style="background:#fff;box-shadow:0 0 15px #000;">
						
							<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="Z6YQ3V7BJXG3Y">
							<table stlye="width:100%;">
							<tr style="width:100%"><td style="width:100%"><input type="hidden" style="width:100%" name="on0" value="donation">Donate (Paypal: admin@bggenerator.com)</td></tr><tr style="width:100%"><td style="width:100%"><select style="width:100%" name="os0">
								<option value="5">$5.00 USD</option>
								<option value="10">$10.00 USD</option>
								<option value="15">$15.00 USD</option>
								<option value="20">$20.00 USD</option>
							</select> </td></tr>
							</table>
							<input type="hidden" name="currency_code" value="USD">
							<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
							<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
							</form>
							<span style="text-align:right"><a href="#" style="color:#000;" onclick="donateHide()" id="donateclose">[x]Close</a></span>
						</div>
					</div>
							<span style="font-size:14px"><a style="cursor: pointer;" onclick="mobileSave()"><b style="color:#fff">无法保存？点击这里！</b></a></span><br>
							<div id="mobilediv" style="display:none">
								
							<span style="font-size:14px">请按住下面的图片进行保存。（在电脑上通过鼠标右键单击下面的图片）</span><br> 
							<img id="mobileOutput" style="width:80%;box-shadow:0 0 15px #000;"></img>
							</div>
							
							<span style="font-size:14px"><b style="color:#fff">预设色彩风格的图像模板</b> - (<a href="#otherstyles">更多样式？</a>)</span><br>
					
<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful6()"><img src="images/colorful6.jpg" width="100px" id="imgshadow" alt="Background Image Preset 1"></a>
						</div>
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful5()"><img src="images/colorful5.jpg" width="100px" id="imgshadow" alt="Background Image Preset 2"></a>
						</div>
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful3()"><img src="images/colorful3.jpg" width="100px" id="imgshadow" alt="Background Image Preset 3"></a>
						</div>
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful4()"><img src="images/colorful4.jpg" width="100px" id="imgshadow" alt="Background Image Preset 4"></a>
						</div>
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful1()"><img src="images/colorful1.jpg" width="100px" id="imgshadow" alt="Background Image Preset 5"></a>
						</div>
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="colorful2()"><img src="images/colorful2.jpg" width="100px" id="imgshadow" alt="Background Image Preset 6"></a>
						</div>
						
					<br>
					

					
					<span style="font-size:14px"><b style="color:#fff">文字效果</b></span><br>
				
							
							
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text1()"><img src="images/shadow3d.jpg" id="imgshadow" alt="Shadow 3D text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text8()"><img src="images/transparent.jpg" id="imgshadow" alt="Transparent Text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text3()"><img src="images/stroketext.jpg" id="imgshadow" alt="Stroke Text Effect"></a>
						</div>	
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text10()"><img src="images/steroscopic.jpg" id="imgshadow" alt="Steroscopic Text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text9()"><img src="images/inset.jpg" id="imgshadow" alt="Inset Text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text4()"><img src="images/lighttext.jpg" id="imgshadow" alt="Light Text Effect"></a>
						</div>	
						
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text5()"><img src="images/stroke3d.jpg" id="imgshadow" alt="Stroke 3D Text Effect"></a>
						</div>	
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text2()"><img src="images/metaltext.jpg" id="imgshadow" alt="Metal Text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text6()"><img src="images/lightindark.jpg" id="imgshadow" alt="Light in Dark Text Effect"></a>
						</div>
						<div style="display:inline;cursor:pointer;padding-right:5px;">
							<a onclick="text7()"><img src="images/backlight.jpg" id="imgshadow" alt="Back Light Text Effect"></a>
						</div>
						
						<p style="font-size:14px"><b style="color:#fff">快速开始</b><br>
						单击“生成”按钮以基于相同的设置生成新的随机背景图像，或更改左侧设置侧栏上的每个选项。单击“撤消”按钮以删除文本，然后可以在左侧设置侧栏上更改文本选项，然后单击“添加文本”以使用新选项再次添加文本。							<br>
							<a href="#tutorial">分步教程</a>
							<br>
							</p>
						
						</div>
					
						
						
					
					
					</br></br>
				
					</section>

					<!-- AddToAny BEGIN -->
<section>
<div align="center"><br></div>
</section>
<!-- AddToAny END -->
<!-- Portfolio -->
					<section id="portfolio" class="two">
						<div class="container" align="center">
						</br>
							<header>
								<h2>创建独特的背景图像!</h2>
							</header>
							
							
							
							<h3 id="otherstyles">您可以使用7种不同的背景图像生成器</h3>
							<br>
							<div style="width:25%;display:inline;cursor:pointer;">
							<a href="zh-cn.php"><img src="images/colorful.jpg" id="imgstyles" alt="Colorful Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="graphics_background_zh-cn.php"><img src="images/graphics.jpg" id="imgstyles" alt="Graphics Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="galaxy_background_zh-cn.php"><img src="images/galaxy.jpg" id="imgstyles" alt="Galaxy Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="changing_light_background_zh-cn.php"><img src="images/changinglight.jpg" id="imgstyles" alt="Changing Light Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="poly_background_zh-cn.php"><img src="images/poly.jpg" id="imgstyles" alt="Poly Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="dream_background_zh-cn.php"><img src="images/dream.jpg" id="imgstyles" alt="Dream Background Image Generator"></a>
						</div>
						&nbsp;&nbsp;
						<div style="width:25%;display:inline;cursor:pointer;">
							<a href="bars_background_zh-cn.php"><img src="images/bars.jpg" id="imgstyles" alt="Bars Background Image Generator"></a>
						</div>
					

							</br></br>
					</section>

<!-- About Me -->
					<section id="about" class="three">
						<div class="container">
</br>
							<header>
								<h3 id="howtouse">如何通过炫彩风格创建不同的出色背景图像</h3>
							</header>

<p>炫彩风格色色背景生成器使用几种不同的模板和样式生成用于各种用途的独特创意彩色背景图像。</p>			
						
<h4 id="tutorial"><b>快速指南-分5个步骤生成炫彩风格的背景图像</b></h4>
							</br>
<div style="text-align:left;">						
<h5><b>1.选择图像尺寸</b></h5>
<p style="text-align:left;">
从预设图像尺寸列表中选择图像尺寸，或者您可以通过单击“宽度”和“高度”框以键入新图像尺寸来自定义图像尺寸。
</p>
<h5><b>2.选择一种颜色类型</b></h5>
<p style="text-align:left;">
您可以将“颜色类型”更改为“自定义颜色”并设置喜欢的颜色，或者默认情况下将选项保留为“随机颜色”，程序将基于随机颜色生成图像。</p>
<h5><b>3.设置形状，数量和形状大小</b></h5>
<p style="text-align:left;">
通过更改“形状”，“形状量”和“最大形状大小”选项，您将获得不同的输出图像。只需尝试不同的选择和值，您可能会发现一些惊人的结果。</p>
<h5><b>4.生成背景图像</b></h5>
<p style="text-align:left;">
单击最大的“生成”按钮，该工具将立即基于您的设置在画布上创建新的背景图像。如果您对当前图像不满意，可以单击“清空”按钮并重新生成新图像。</p>
<h5><b>5.保存背景图片</b></h5>
<p style="text-align:left;">
生成的图像的预览下方有2个保存按钮。您可以将图像保存为JPG（JPEG）格式和PNG格式。如果要创建具有透明背景的图像，请将“透明度”设置为“透明”，并在生成后将图像另存为PNG格式。</p>

<i>生成背景图像后，可以单击左侧边栏的“添加文本”以将文本添加到图像上。</i>
<br><br>
</div>		


					</section>

				

				

			</div>

		<!-- Footer -->
			<div id="footer">
<BR>
<h2>AI Image Toolkit Special Promotion</h2><BR>

<div align="center">
	<a href="ai-image-toolkit.html"><img src="images/image-toolkit-promo.jpg" alt="AI Image Toolkit Special Promotion" style="width:100%;max-width:600px"></a>
<BR>
<b style="font-size:160%">Now for only $49.95 USD!</b> <BR><i style="font-size:140%">72% OFF!</i>
<BR><BR>
<a href="ai-image-toolkit.html" class="button"><b style="font-weight:bold;font-size:100%;color:#f1f1f1;">Check More Details!</b></a>
	</div>
<BR><BR>

				<!-- Copyright -->
					<ul class="copyright">
						<li><script>new Date().getFullYear()>2010&&document.write(new Date().getFullYear());</script> &copy; <b>Background Generator</b> - BgGenerator.com. All rights reserved. | <a href="desktop.html">Desktop Version</a> | <a href="pngenlarger.html">AI PNG Enlarger</a> | <a href="batch_ai_photo_sharpener.html">Batch AI Photo Sharpener</a> | <a href="batch_image_combiner.html">Batch Image Combiner</a> | <a href="#">Back to Top</a></li>
					</ul>

			</div>

<script>
	
	function IEVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if(fIEVersion == 7) {
            return 7;
        } else if(fIEVersion == 8) {
            return 8;
        } else if(fIEVersion == 9) {
            return 9;
        } else if(fIEVersion == 10) {
            return 10;
        } else {
            return 6;//IE版本<=7
        }   
    } else if(isEdge) {
        return 'edge';//edge
    } else if(isIE11) {
        return 11; //IE11  
    }else{
        return -1;//不是ie浏览器
    }
}
if (IEVersion()>0) document.getElementById('ie').style.display="";
	
	</script>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			
			
			<script src="js/easeljs-0.7.1.min.js"></script>
			<script src="js/TweenMax.min.js"></script>
			
			
			<script>
				var notColorful=false;
				
				
			</script>
			<script>var wudi=true;</script><script src="js/main.js"></script>
<script src="js/templates.js"></script>
			<script src="js/galaxy.js"></script>
			<script src="js/thunder.js"></script>
			
			
			
	<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node94.aizhantj.com:21233/tjjs/?k=lce5g1l23d5"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></body>
</html>