我目前在使用网站时遇到问题。当在较大的屏幕上查看页面或缩小时(缩小并自己查看)，我试图使文本保持在同一位置。我对右侧的按钮有同样的问题。谁能告诉我如何解决这个问题？
请帮我解决这个问题。我不知道该怎么做，我尝试了绝对定位，用边距单独定位 div，但没有任何效果。我认为 parent 的参数会覆盖子参数或其他东西。老实说，我不知道还能尝试什么。已经浪费了几天。
这是我的 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:portal-m@hotmail.com"><!-- 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 */
{
color: #0000EF;
background-color: #E668D9;
}
.html
{
background-color: #000000;
}
#page
{
z-index: 1;
max-width:100%;
height: auto;
border-style: none;
border-color: transparent;
padding-bottom: 212px;
margin-left: auto;
margin-right: auto;
background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
width: 0.01px;
margin-right: -10000px;
margin-top: 478px;
margin-left: 138px;
position: relative;
}
#u203-4
{
z-index: 2;
display: block;
vertical-align: top;
margin-left: 138px;
position: relative;
}
#u205-24
{
z-index: 6;
min-width: 465px;
height: auto;
margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
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
{
width:100%;
font-size: 11px;
line-height: 13px;
color: #86A4B2;
font-family: cambo, serif;
font-weight: 400;
}
#pu400
{
width: 0.01px;
margin-right: -10000px;
margin-top: 570px;
margin-left: 892px;
}
#u400
{
z-index: 31;
width: 354px;
height: 120px;
position: relative;
background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
background-size: contain;
}
#u400:hover
{
margin: 0px;
background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
background-size: contain;
}
#u400:active
{
margin: 0px;
background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
background-size: contain;
}
#u400.MuseLinkActive
{
margin: 0px;
background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
background-size: contain;
}
#u383
{
z-index: 30;
width: 354px;
height: 120px;
top: -8px;
margin-bottom: -8px;
position: relative;
background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
background-size: contain;
}
#u383:hover
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-over.png") no-repeat left top;
background-size: contain;
}
#u383:active
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
background-size: contain;
}
body
{
position: relative;
min-width: 1280px;
max-height:100%;
}最佳答案
尝试为您的页面使用包装器，如下所示:
<div class="wrap"> all your page content </div>
使用这个 CSS:
.wrap {width=800px; margin: 0px auto;}
这将自动水平居中 DIV 包装器，并确保其中的所有内容始终位于相对于包装器的同一位置。 您仍然可以通过添加更多内容或添加高度值来垂直扩展页面。
如果 800 像素太大或太小，您可能想要更改宽度，但请确保它是一个常量 (px) 值。
关于html - 如何让文字和按钮贴在背景上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26441921/