0
我目前有一個網站的問題。當頁面在大屏幕上查看或縮小時（縮小並自己查看），我試圖使文本保持在同一位置。我與右側的按鈕有同樣的問題。任何人都可以告訴我如何解決這個問題？如何讓文本和按鈕粘到背景上？
請幫助我。我不知道該做什麼，我嘗試了絕對的定位，單獨定位帶有空白的div，沒有任何作用。我認爲父母的參數覆蓋了孩子的參數或其他東西。我真的不知道還有什麼要嘗試。已經浪費時間了。
這裏是我的HTML代碼
<!DOCTYPE html>
<html class="html">
<head>
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2014.0.1.264"/>
<title>HOME</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?475048684"/>
<link rel="stylesheet" type="text/css" href="css/index.css?4024854745" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>
<!-- JS includes -->
<script type="text/javascript">
document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/cambo:n4:all.js" type="text/javascript">\x3C/script>');
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- group -->
<div class="clearfix grpelem" id="pu203-4"><!-- column -->
<img class="colelem" id="u203-4" alt="ABOUT ME" width="171" height="41" src="images/u203-4.png"/><!-- rasterized frame -->
<div class="clearfix colelem" id="u205-24" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U205"><!-- content -->
<p id="u205-2">My name is Ronny Minkovsky, and I'm a graphics designer and artist, currently based somewhere behind a computer screen.</p>
<p id="u205-3"> </p>
<p id="u205-5">About 6 years ago, I realized my passion for art, and began a self-taught career... for now.</p>
<p id="u205-6"> </p>
<p id="u205-8">Ever since my childhood days, I've always loved gaming, and developed a real passion for its graphics, a passion that eventually lead me into creating, and participating in the art production of several games, one of which will be released on steam shortly, by the name of CivCraft.</p>
<p id="u205-9"> </p>
<p id="u205-11">I'm majorly inspired by the Cyberpunk genre, and by authors such as Philip K. Dick, H. P. Lovecraft, Edgar Allan Poe, and Baudrillard and have been gaming since the good old days of Divine Divinity, and Ultima.</p>
<p id="u205-12"> </p>
<p id="u205-14">Even though I prefer gaming graphics, I also tend to be versatile, working on web design, and advertising as well.</p>
<p id="u205-15"> </p>
<p id="u205-17">I know my way around a number of digital art programs, mainly Photoshop, Illustrator, and Sketchbook Pro.</p>
<p id="u205-18"> </p>
<p id="u205-20">Take a moment to browse through my Projects section, where I uploaded a few works from different fields, or skim through the Artwork tab for random art I made.</p>
<p id="u205-21"> </p>
<p> </p>
</div>
</div>
<div class="clearfix grpelem" id="pu400"><!-- column -->
<a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:[email protected]"><!-- simple frame --></a>
<a class="nonblock nontext museBGSize colelem" id="u383" href="callto://portal230762"><!-- simple frame --></a>
</div>
</div>
<div class="preload_images">
<img class="preload" src="images/mail%20button1-o.png" alt=""/>
<img class="preload" src="images/mail%20button1-m.png" alt=""/>
<img class="preload" src="images/mail%20button1-n.png" alt=""/>
<img class="preload" src="images/skype%20button-over.png" alt=""/>
<img class="preload" src="images/skype%20button-mouse%20down.png" alt=""/>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?353204447" type="text/javascript"></script>
<script src="scripts/jquery.musepolyfill.bgsize.js?323834883" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),l=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":l=l.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(l);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(l);break;case "js":l.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();(Muse.assets.outOfDate.length||Muse.assets.required.length)&&alert("Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.")})()})();/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>這裏是CSS代碼
.version.index /* version checker */
{
\t color: #0000EF;
\t background-color: #E668D9;
}
.html
{
\t background-color: #000000;
}
#page
{
\t z-index: 1;
\t max-width:100%;
\t height: auto;
\t border-style: none;
\t border-color: transparent;
\t padding-bottom: 212px;
\t margin-left: auto;
\t margin-right: auto;
\t background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
\t width: 0.01px;
\t margin-right: -10000px;
\t margin-top: 478px;
\t margin-left: 138px;
position: relative;
}
#u203-4
{
\t z-index: 2;
\t display: block;
\t vertical-align: top;
\t margin-left: 138px;
\t position: relative;
}
#u205-24
{
\t z-index: 6;
\t min-width: 465px;
\t height: auto;
\t margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
\t position: relative;
}
#u205-2,#u205-3,#u205-5,#u205-6,#u205-8,#u205-9,#u205-11,#u205-12,#u205-14,#u205-15,#u205-17,#u205-18,#u205-20,#u205-21
{
\t width:100%;
font-size: 11px;
\t line-height: 13px;
\t color: #86A4B2;
\t font-family: cambo, serif;
\t font-weight: 400;
}
#pu400
{
\t width: 0.01px;
\t margin-right: -10000px;
\t margin-top: 570px;
\t margin-left: 892px;
}
#u400
{
\t z-index: 31;
\t width: 354px;
\t height: 120px;
\t position: relative;
\t background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
\t background-size: contain;
}
#u400:hover
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
\t background-size: contain;
}
#u400:active
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
\t background-size: contain;
}
#u400.MuseLinkActive
{
\t margin: 0px;
\t background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
\t background-size: contain;
}
#u383
{
\t z-index: 30;
\t width: 354px;
\t height: 120px;
\t top: -8px;
\t margin-bottom: -8px;
\t position: relative;
\t background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
\t background-size: contain;
}
#u383:hover
{
\t margin: 0px 0px -8px;
\t background: transparent url("../images/skype%20button-over.png") no-repeat left top;
\t background-size: contain;
}
#u383:active
{
\t margin: 0px 0px -8px;
\t background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
\t background-size: contain;
}
body
{
\t position: relative;
\t min-width: 1280px;
max-height:100%;
}
對不起，在手機上現在很難輸入完整的答案，但要保持文本在同一個地方，你可以使用固定位置：固定，並保持縮放相同，你可以使用反變焦。換句話說：1/zoomlevel。 – trnelson 2014-10-18 16:25:09
不管滾動/縮放，「固定」不會將文本保持在屏幕上的固定位置嗎？我也有興趣在更大的屏幕上查看該網站。它不會縮放背景使像素可見嗎？ – 2014-10-18 16:29:51