1. كنت مؤخرًا أستخدم قماش h5 لرسم الرسوم المتحركة ووجدت أن الصور كانت ضبابية بشكل خاص. لاحقًا، وجدت أخيرًا أن الجاني هو الكود <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />, بسبب هذا الخط يتم تحجيم الكود
2. تأثير طمس الصور:
3. التأثير بعد إزالة الضغط
يمكن تغيير الكود الى
<!DOCTYPE html><html><head> <meta charset=utf-8 /> <meta name=viewport content=user-scalable=no /> <title>صفحة تفاصيل الحدث</title> <script src=js/ rem.js type=text/javascript charset=utf-8></script> <link rel=stylesheet type=text/css href=css/m_reset.css /> <link rel=stylesheet type=text/css href=css/gameListsNew.css /> <link href=css/mask.css rel=stylesheet /></head><body> <div class=tipMask> <div class=tipBox> <img src=img/faileTip.png class=tipsImg /> <div class=fileBtn> <img src=img/fileBtn.png /> <span class=tryAgain>حاول مرة أخرى</span> </div> </div> </div> <div> <img src=img/whiteBack.png class=titleImg / > <div class=bgEvent id=contentbody> <div id=eventDetail v-cloak> <!--Title--> <div class=detailevent> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(this); div> </div> <div class=titlevs style=padding-top:0.3rem;> <div> <!--لم تبدأ بعد--> <!--<p class=theWorldCup>كأس العالم</p>--> <p class=theGameNowDataTime>{{eventDetail.TimeFormat }}</p> <p class=gameBeginTime>{{getScoreOrVs(eventDetail.HomeTeamScore, eventsDetail .AwayTeamScore)}}</p> </div> <!--مدة البدء--> <!--<div> <p>73:40</p> </div>--> </div> <div class=titlevs> <img class=teamFlagLogo onerror=nofind(this); .AwayTeamID+'.png' /> <div class=countryName> {{eventDetail.AwayTeamName}} </div> </div> </div> <div id=ordersuccess class=ordersuccess> <div style=text-align:right;padding-top:0.2rem;padding-left:0.2rem;> <img src=img/ordersuccess/إغلاق.png style=width:0.45rem; height:0.45rem; id= Closesuccess onclick= Closesuccess(); /> </div> <div class=teamname> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.HomeTeamName}}</p><br /><p class=teamnameitembottom>الصفحة الرئيسية</p></div> <div class=teamnameitem ><p class=teamnameitemmiddle>VS</p></div> <div class=teamnameitem><p class=teamnameitemtop>{{eventDetail.AwayTeamName}}</p><br /><p class=teamnameitembottom>AWAY</p></div> </div> <div class=teamdetail> <div class=teamdate><span>{{eventDetail.CompetitionName}}</span><span>/</span><span>{{eventDetail.DateFormat}}</span></div> <div class=teamplaysselection> <نمط الجدول=العرض:100%;محاذاة النص:يسار;الارتفاع:100%;> <tr> <td class=teamplaysselectiontop style=width:50%;>كيفية اللعب</td> <td class=teamplaysselectiontop style=width:50%;>الخيارات</td> </tr> <tr> <td class=teamplaysselectionbottom style=width:50 %; id=rulename>مطابقة الاحتمالات</td> <td class=teamplaysselectionbottom style=width:50%; id=selectionname>الصفحة الرئيسية</td> </tr> </table> </div> <div class=teamwinmoney> <table style=width:90%;text-align:left;height:100%;> <tr > <td class=teamwinmoneytop style=width:50%;> المدير</td> <td class=teamwinmoneytop style=width:50%;> الاحتمالات</td> <td class=teamwinmoneytop style=width:50%;> الفوز المسبق</td> </tr> <tr> <td class=teamwinmoneybottom style=width:50%; id=betmoneysuc>1000</td> <td class =teamwinmoneybottom style=width:50%; id=betodds>12.54</td> <td class=teamwinmoneybottom style=width:50%; id=betwin>12540</td> </tr> </table> </div> </div> </div> </div> <div> <div class= معرف المربع=مربع> <canvas id=courtCaseNew width=980 height=765></canvas> </div> <img src=img/balllittle.png style=width:20px;height:20px;display:none; id=imgballNew /> </div> <div class=middlechat> <div class=middleitem id=jcc> <p class=tabActive>مجال الرهان</p> </div> <div class=middleitem id=jcjl> <p class=tabCommon>سجل الرهان</p> </div> <div class=middleitem id=sssj> <p class=tabCommon>الأحداث</p> </div> <div class=middleitem id=jstj> <p class=tabCommon>الإحصائيات الفنية</p> </div> </div div> <div class=downChangrTab quizGames style=display: block;> <div id=ruleTypeItems v-cloak> <!--فوز، تعادل، خسارة--> <div class=diffPlaysTetx v-for=(item,index) in eventsDetail.Market v-if=item.RuleType==100> <span class=speciesName>النتائج</span> <span class=rotary v-if=item !=1>(مغلقة)</span> <span class=speciesExp>خمن نتيجة الفريقين في 90 دقيقة (شاملة الوقت بدل الضائع)</span> </div> <div v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==100 id=اسم النتيجة=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? v-for=(select,index) في item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'Result' , Select.SelectionName); name=itemSelection> <p class=winEquLose v-bind:name='item'+item.MarketId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind: id=item.MarketId+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none v-bind:id='redOne' +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--فردي وزوجي- - > <div class=diffPlaysTetx v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==130> <span class=speciesName>فردي وزوجي</span> <span class=rotary v-if=item.State!=1>(مغلق)</span> <span class=speciesExp>خمن الـ 90 دقيقة (بما في ذلك الوقت المحتسب بدل الضائع) اللعبة إجمالي الأهداف الفردية والزوجية</span> </div> <div id=oddeven v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==130 name=selectionItems class=oddeven> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'oddevenitem commonBorderGray':'oddevenitem commonBorder'] v-for=(select,index ) في item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'odd and up',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ العنصر .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none v-bind:id='redOne' +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--إجمالي الأهداف- - > <div class=diffPlaysTetx v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==410> <span class=speciesName>إجمالي الأهداف</span> <span class=rotary v-if=item.State!=1>(مغلق)</span> <span class=speciesExp>خمن 90 دقيقة (بما في ذلك الوقت بدل الضائع) العدد الإجمالي عدد الأهداف في المباراة</span> </div> <div id=totalGoals v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==410 name=selectionItems class=totalGoals> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'totalGoalitemGray commonBorderGray':'totalGoalitem commonBorder'] v-for=(select,index ) في item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'إجمالي الأهداف',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ item .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none v-bind:id='redOne' +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none; v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <!--النتيجة الكاملة- - > <div class=diffPlaysTetx v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==140> <span class=speciesName>نتيجة الدوام الكامل</span> <span class=rotary v-if=item.State!=1>(مغلقة)</span> <span class=speciesExp>خمن 90 دقيقة (بما في ذلك الوقت المحتسب بدل الضائع) كامل النتيجة</span> </div> <div id=correctScoreHome v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==140 name=selectionItems class=correctScoreHomeAway> <div v-bind:class=[(select.BackOdds<1.01 || item.State!=1) ? 'correctScoreitemGray commonBorderGray':'correctScoreitem commonBorder'] v-for=(select,index) في العنصر .التحديد v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'full Score',select.SelectionName) name=itemSelection> <p class=winEquLose v-bind:name='item'+ item .MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none v-bind:id='redOne' +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> </div> <div class=downImg onclick=clickImg ()> <img src=img/toDown.png /> </div> <!--الهدف التالي--> <div class=diffPlaysTetx v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==350> <span class=speciesName>الهدف التالي</span> <span class=rotary v-if=item.State != 1>(مغلق)</span> <span class=speciesExp>خمن الفريق الذي سيسجل الهدف التالي خلال 90 دقيقة (بما في ذلك الوقت بدل الضائع)</span> </div> <div id=nextgoal v-for=(item,index) في eventsDetail.Market v-if=item.RuleType==350 name=selectionItems class=result> <div v-bind:class=[(select.BackOdds<1.01 || item.State !=1) ? 'resutitem commonBorderGray':'resutitem commonBorder'] v-for=(select,index) in item.Selection v-on:click=select.BackOdds>=1.01 &&clickFun($event,item.State,select.BackOdds,item.MarketId,select.SelectionId,'الهدف التالي',select.SelectionName) name=itemSelection > < p class=winEquLose v-bind:name='item'+item.MarketId v-bind:id='selectionname'+item.MarketId+select.SelectionId>{{select.SelectionName}}</p> <p class=winEquLoseOdds v-bind:name='item'+item.MarketId> <span v-bind:id=item.MarketId+select.SelectionId v-bind:maxlimit=select.MaxStakeLimit>{{select.BackOdds}}</span> <img src=img/upIng.png style=width:0.2rem;display:none v-bind:id='redOne' +item.MarketId+select.SelectionId /> <img src=img/downIng.png style=width:0.2rem;display:none v-bind:id='greenOne'+item.MarketId+select.SelectionId /> </p> </div> <div class= style=width: 100%;height :0.45rem;></div> </div> <div class=perchDiv style=width: 100%;height:3rem;></div> </div> </div> <!--تخمين السجل--> <div class=downChangrTabتخمينRecord> <div class=hide-body id=dialogorders> <div class =tableNameGuess> <li>كيفية اللعب</li> <li>الخيارات</li> <li>الاحتمالات</li> <li>المكافأة</li> <li>النتائج</li> </div> < ماي style=background:#FFFFFF;height:4.79rem;overflow: التمرير;> <div class=guessedLists id=contentOrders v-for=(item,index) in Orders> <li> {{item.MarketName}} </li > <li> {{item.SelectionName}} </li> <li> {{item.FillPrice}} </li> <li> {{item.FillAmount}} </li> <li> <p v-if=item.Status == '0'> في انتظار التأكيد</p> <p v-else-if=item.Status == '1 '>الطلب موافق</p> <p v-else-if=item.Status == '2'>{{item.NetReturn}}</p> <p v-else-if=item.Status == '3'>تم إلغاء الطلب</p> <p v-else-if=item.Status == '4'>الطلب غير صالح</p> <p v-else=item.Status = = '5 '>تم رفض الطلب، ووقعت أحداث مهمة أثناء فترة تأخير الرهان، وما إلى ذلك.</p> </li> </div> </ul> </div> </div> <!--Event الأحداث--> <div class =downChangrTab style=display: none; v-if=> <div class=login-body id=contentCases> <table class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <div class =happenedMiddle_top style=margin-top: 0.4rem;></div> </td> <td></td> </tr> </table> <table class=whatHappen style= v-for=(item,index) في الحالات border=0 cellpacing=0 cellpadding=0> <tr> <td></td> <td class=happenedMiddle> <div class=happenedMiddle_line></div> < /td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('main')>-1> <td class=eventsHappendLeft_things> <div class=eventsText> <p class=eventsTextLeft_time>{{item.CaseMinutes}}'</p> <p class=eventsTextLeft_Country>{{item.CaseDescription}}</p> </div> < /td> <td class=happenedMiddle> <div class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </div> </td> <td></td> </tr> <tr v-if=item.CaseDescription.indexOf('客')>- 1> <td></td> <td class=happenedMiddle> <div class=eventsHappend_img> <img :src=GetMatchEventImg(item.CaseDescription) /> </div> </td> <td class=eventsHappendRight_things> <div class=eventsText> <p class=eventsTextRight_Country>{{item.CaseDescription}}</p> <p class=eventsTextRight_time>{{item.CaseMinutes}}'</p> </div> </td> </tr> <tr v-if=item.CaseDescription.indexOf('main')<0 && item.CaseDescription.indexOf('main')<0> <td></td > <td> <a class=ti telefoc>{{item.CaseMinutes}}'</a> <a class=titlefoc>{{item.DesChina}}</a> </td> <td></td> </tr> </table> <table class=whatHappen v-if=cases.length >0> <tr> <td></td> <td class=happenedMiddle> <div class=happenedMiddle_line></div> <div class=happenedMiddle_top></div> </td> <td></td> </tr> </table> <!--<div style=width: 100%; height: 2.7rem;></div>--> </div> </div> <!--الإحصائيات الفنية--> <div class=downChangrTab style=display: none;> < div class=skillInfoGaryBg id=stutsskillsData> <div class=skillInfo v-for=(العنصر، الفهرس) في بيانات المهارات> <li class=shotsOnTargets> <div class=shotsOnTargets_left> <p class=skillsTextFonts>{{item.AwayTeamValue}}</p> <div class=sotl_bg> <div class=sotl_bgProgress></div> </div> </div > <div class=shotsOnTargets_middle> <img :src=GetMatchStatsImage(item.StatsType) /> <p class=shills_name>{{item.StatsType}}</p> </div> <div class=shotsOnTargets_right> <p class=skillsTextFonts>{{item.HomeTeamValue} </p> <div class=sotl_bg> <div class=sotl_bgProgress></div> </div> </div> </li> </div> </div> </div> </div> <!--الترتيب السفلي--> <div class=buttomOrder> <!--إدخال المبلغ - -> <!--مبلغ الرهان--> <div class=aboutMoney> <input type=text name= id=betmoney class=gussMoney value=عنصر نائب لمبلغ الرهان= readonly=readonly v-model=gussMoney /> <img src=img/clearBetMoney.png class=clearGussMoney id=clearGussMoney /> <!--Balance--> <span class=balanceMoney id=minemoney>رصيدي: 888</span> <!--مبلغ الرهان -- > <div class=diffGussMoney style=text-align:center;> <ul> <li name=bettingmoney class=difGuMonCom val=100>+100</li> <li name=bettingmoney class=difGuMonCom val=500>+500</li> <li name=bettingmoney class=difGuMonCom val=1000>+1000</li> <li class= معرف difGuMonCom = نمط allin = ارتفاع الخط: 0.5rem؛> <p style = الارتفاع: 0.3rem;>الكل <span style=margin-left: 0.05rem;>في</span></p> <p id=allinvalue style=height: 0.3rem;>100</p> </li> </ p> ul> </div> <!--OK--> <p class=subSure subSureRed style=text-align:center onclick=CreateOrder(); id=subSure> موافق</p> </div> </div> <!--طبقة القناع بعد الطلب الناجح-> <div id=overlay class=overlay></div> </div> <div > < img src=img/goal/goalball.png /> <img src=img/goal/goal.png /> <img src=img/goal/fireworks.png /> </div> <script src=js/jquery-1.10.2.min.js type=text/javascript charset=utf-8></script> <script src=js/vue.min.js type=text/javascript charset=utf-8></script> <script src=js/common.js?ver=012902 type=text/javascript charset=utf-8></script> <script src=js/jquery.cookie.min.js></script> <script src=js/mask.js?ver=012901></script> <script type= text/javascript src=js/eventDetailsNew.js?ver=012908></script> <script src=../js/animation.js></script></body></html> تلخيصما ورد أعلاه هو الحل الأمثل لمشكلة طمس صورة HTML5 التي قدمها المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!