处理css图像背景溢出 [英] handle the css image background overflow
本文介绍了处理css图像背景溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为我的一个客户创建了这个Facebook登陆页面，背景似乎非常糟糕。我尝试了很多溢出代码，但似乎都没有帮助。当Facebook评论框被扩展时，页面变得疯狂。我需要的是当按下Facebook评论框中的查看更多...按钮时，我希望背景展开并为展开的部分提供黑色背景，这将与现有背景无形地合并
或通过滚动处理评论框的溢出。我尝试通过在不产生结果的iframe中嵌入注释框来实现这一点。
所有代码都附在下面。
HTML代码：
I created this Facebook landing page for one of my clients and the background seems to be holding the overflow pretty badly. I tried many overflow codes but none of them seem to help. When the Facebook comment box is expanded the page goes crazy. What I need is when the "View More..." button in the Facebook comment box is pressed I want the background to expand and have a black background to the expanded section which will merge invisibly with the existing background
or have the overflow of the comment box handled via scrolling. I tried doing that by embedding the comment box in a iframe which didn't produce results.
All codes are attached below.
HTML Code:
<head>
[[style.css]]
</head>
<div align=top style="margin-removed 180px;">
<div align=left style="margin-removed 460px;">
<font face="Calibri">
<div id="WFItem349383" class="wf-formTpl">
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bmwp"
method="post">
<div class="wf-box">
<div id="WFIheader" class="wf-header el" style="height: 20.1818182468414px; display: none !important;">
<div class="actTinyMceElBodyContent">
<p style="text-align: center !important;">
<span style="font-family: verdana !important; font-size: 14px !important; color: rgb(0, 0, 0) !important;">
<span style="line-height: 8px !important; display: inline-block !important;">Silakan Masukkan NAMA & EMAIL Dibawah ini :</span>
</span>
</p>
<p style="text-align: center !important;"></p>
<p></p>
</div>
</div>
<div id="WFIcenter" class="wf-body">
<ul class="wf-sortable" id="wf-sort-id">
<li class="wf-name" rel="undefined" style="display: block !important;">
<div class="wf-contbox">
<div class="wf-labelpos">
<label class="wf-label">Name:</label>
</div>
<div class="wf-inputpos">
<input type="text" style="background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaabhkleqvq4eavto26dqbd1ohqwas2lg9jybz+ak7hnwx2oiovf4upq0lj1fdkktevipel8aknukdcwmxpgsaieatvv3sx7uztitdu2s/98dywow3dued4who/m2aix5lzv1aesy0+qiwhelyi+ytl0pq69sxaxkwia4rmrtdnske59jumcuzd6xiafez6fgcdj8ky4y7kautrngd7jyebxsdope3a0qgpsnionnymo67lgsqn9t41f2qgrqrrfcwyzoif2qybukkbcogpxdvey9rmwgnsjf9ccyesjhk3f5dyt1hx9gr0llqr30tnjkuecx2uius4rni+aj6sjr0am8aaumpam/rrehywhxqbfaa9kh3/8/nvhxaygasz/il8ialkclbfnvaaaaabjru5erkjggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat; width: 267px;"
class="wf-input" name="name"></input>
</div>
</div>
</li>
<li class="wf-email" rel="undefined" style="display: block !important;">
<div class="wf-contbox">
<div class="wf-labelpos">
<label class="wf-label">Email:</label>
</div>
<div class="wf-inputpos">
<input type="text" class="wf-input wf-req wf-valid__email" name="email" style="width: 267px"></input>
</div>
</div>
</li>
<li class="wf-submit" rel="undefined" style="display: block !important;">
<div class="wf-contbox">
<div class="wf-inputpos">
<!--<input type="submit" class="wf-button" name="submit" value="Saya Mau Tau Rahasianya"
style="display: inline !important; width: 269px !important;">-->
<input type="image" src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/USEFULLBUTTONSWHITEfg_zps4213880f.png" class="wf-button" name="submit" style="margin-left: 35px;margin-top: 5px;">
</input>
</div>
</div>
</li>
<li class="wf-counter" rel="undefined temporary" style="display: none !important;">
<div class="wf-contbox">
<div>
<span style="padding: 4px 6px 8px 24px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 0% 0px no-repeat scroll transparent;"
class="wf-counterbox">
<span class="wf-counterboxbg" style="padding: 4px 12px 8px 5px; background: removed(https://app.getresponse.com/images/core/webforms/countertemplates.png) 100% -36px no-repeat scroll transparent;">
<span class="wf-counterbox0" style="padding: 5px 0px;"></span>
<span style="padding: 5px;" name="https://app.getresponse.com/display_subscribers_count.js?campaign_name=planetuang&var=0"
class="wf-counterbox1 wf-counterq">0</span>
<span style="padding: 5px 0px;" class="wf-counterbox2">subscribers</span>
</span>
</span>
</div>
</div>
</li>
<li class="wf-captcha" rel="undefined temporary" style="display: none !important;">
<div style="display: block !important;" wf-captchaerror="Incorrect please try again"
wf-captchasound="Enter the numbers you hear:" wf-captchaword="Enter the words above:"
class="wf-contbox wf-captcha-1" id="wf-captcha-1"></div>
</li>
<li class="wf-privacy" rel="undefined" style="display: block !important;">
<div class="wf-contbox">
<div>
<a target="_blank" class="wf-privacy wf-privacyico" href="http://www.getresponse.com/permission-seal?lang=en"
style="height: 21px !important; display: inline !important;margin-removed 55px;margin-removed -20px;">We respect your privacy</a>
</div>
</div>
</li>
<li class="wf-poweredby" rel="undefined temporary" style="text-align: center; display: none !important;">
<div class="wf-contbox">
<div>
<span style="display: none !important;" class="wf-poweredby wf-poweredbyico">
<a target="_blank" style="display: inline !important; color: inherit !important;"
class="wf-poweredbylink wf-poweredby" href="http://www.getresponse.com/">Email Marketing</a>by GetResponse</span>
</div>
</div>
</li>
</ul>
</div>
<div id="WFIfooter" class="wf-footer el" style="height: 160px; display: none !important;">
<div class="actTinyMceElBodyContent">
<p>Copyright by Planetuang.com</p>
</div>
</div>
</div>
<input type="hidden" name="webform_id" value="349383" />
</form>
</div>
<script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=349383&mg_param1=1&u=Bmwp"></script>
</font>
</div>
</div>
<div align=top style="margin-removed 120px;">
<div align=left style="margin-removed 10px;">
<fb:comments href="http://planetuang.com" numposts="3" colorscheme="dark"></fb:comments>
</div>
</div>
<div align=top style="margin-removed -390px;">
<div align=right style="margin-removed 40px;">
<a href="http://www.facebook.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Facebooklogo_zpsd9786622.png" width="150px" height="45px" border="0" alt="Facebook" /></a>
<br />
<br />
<a href="http://www.Twitter.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Twitter_logo_png-5_zps654ec1de.png" width="150px" height="45px" border="0" alt="Twitter" /></a>
<br />
<br />
<a href="http://www.pinterest.com/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/Pinterest_logo_zps568b5041.png" width="150px" height="45px" border="0" alt="Pinterest" /></a>
<br />
<br />
<a href="http://www.linkedin.com/in/husanto" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/li_zpsc499f6cf.png" width="150px" height="45px" border="0" alt="LinkedIn" /></a>
<br />
<br />
<a href="http://www.youtube.com/planetuang" target="_blank"><img src="http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/youtube-channel-logo_zps9ac07079.png" width="150px" height="45px" border="0" alt="YouTube" /></a>
CSS Code:
CSS Code:
body {
background: #000 url("http://i1162.photobucket.com/albums/q535/SachithPerera1/Fiverr%201/husanto/BG1_zpsc13e85e5.png") no-repeat center center fixed;
} 推荐答案
I edited the height of the background image to be longer and the problem was then fixed. No thank you to everyone who did not help me.
I edited the height of the background image to be longer and the problem was then fixed. No thank you to everyone who did not help me.
这篇关于处理css图像背景溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
