html - 在 CSS 中定位标题图片-6ren

html - 在 CSS 中定位标题图片

转载作者：太空宇宙更新时间：2023-11-04 14:41:40

我正在尝试使用我在 CS6 Illustrator 中创建的横幅作为我网站上的标题。我把它作为背景，将它设置为“顶部”位置和“不重复”，但由于某种原因它出现在标题区域的底部，图像和标题区域的边框之间有 300 像素的填充.我增加了页眉区域的高度，以便你们可以看到背景图像呈现多远......它位于文本区域下方，而不是作为文本背景出现(这适用于较小的图像)。

这是我的网站 My Company's Site

这是我的 CSS:

 @media (min-width: 1420px) { 

header { font-family: 'DJGrossNormal'; text-align:center; font-size:1.3em; font-weight:bold; color: #FF0;  background:  url(/images/HeaderImage.png) top no-repeat; positon: relative; bottom: -100px; }

.mac header { padding-top:15px; }

.win header { 
    margin-right:75px;
    height:200px;
    padding-top: 15px;
    border: solid white 10px;
    }

body {
    background-color: #CECDB3;
    padding: 5px;
    margin: 2px;
}
footer {
    height:150px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #C8C99F 60%, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* Opera */ 
background-image: -o-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #C8C99F), color-stop(0.9, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #C8C99F 60%, #FFFFFF 90%); }


.win body {
    background:#FF0;
    padding: 5px;
    margin: 2px;
}



.win .wrapper {
     font-family:Verdana, Geneva, sans-serif; height:900px; background-color:#C8C99F; border-bottom:dashed black 5px; border-top: none; border-right:none; border-left: solid black 5px;
      -moz-border-radius-topright: 40px;
    -webkit-border-radius-topright: 40px;
    border-top-right-radius: 40px;}


.mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left;
 }
  a:link { text-decoration: none; color: black;  font-family: 'DJGrossNormal'; margin-bottom: 100px; font-size: 1.5em;  }

 .homepage {text-align: justify; font-family: 'permanent_markerregular'; font-size:1.1em; font-weight:80; }
 .navtext { padding-left: 10px; padding-top:15px; }
.slideshow { position:relative; right: -18%; }

.livecoaching { position: relative; right: -20%;  }
.seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; font-family:'Telex'; }
.aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; font-family: 'Telex'; }
#rightimages { position: relative; float: right; }
.contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }

.rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    bottom: 770px;
    background-color: #C8C99F;
    padding: 2px;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px;
}

.win .rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    bottom: 745px;
    background-color: #C8C99F;
    color: black;
    border: solid black 3px;
    padding: 2px;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px; }
.leftcontent { float:left; width: 60%; position: relative; bottom: -1em; }
.win .leftcontent { border: solid black 3px; }
.win .leftcontent { background-color:#C8C99F; }


.clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

.coachingintro { position: relative; right: 0.2em; font-family: 'CaviarDreamsRegular'; font-size:1.5em; text-align:center; font-weight: 400; }
form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-weight:300;
    font-family: Verdana, Geneva, sans-serif;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}

.win form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-weight:300;
    font-family: Verdana, Geneva, sans-serif;
    padding:2px;
    border:solid white 6px;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}



h3:first-letter { font-family: 'KaushanScriptRegular'; font-size: 50px; }
h3 { font-family: 'sofia_pro_lightregular'; }



 article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:Helvetica; }



 a:visited {color:black;}
}

@media (min-width: 1260px) and (max-width: 1419px) {

header { font-family: 'DJGrossNormal'; text-align:center; font-size:1.5em; font-weight:bold; color: #FF0; border-bottom: solid white 10px; background: url(/images/HeaderImage.png) top no-repeat ; height: 500px; }

.mac header { padding-top:15px; }

.win header { 
    margin-right:75px;
    font-size:1.9em;
    height:175px;
    padding-top: 15px;
    }

body {
    background-color: #CECDB3;
    padding: 5px;
    margin: 2px;
}
footer {
    height:150px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #C8C99F 60%, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* Opera */ 
background-image: -o-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #C8C99F), color-stop(0.9, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #C8C99F 60%, #FFFFFF 90%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #C8C99F 60%, #FFFFFF 90%); }


.win body {
    background:#FF0;
    padding: 5px;
    margin: 2px;
}



.win .wrapper {
     font-family:Verdana, Geneva, sans-serif; height:900px; background-color:#C8C99F; border-bottom:dashed black 5px; border-top: none; border-right:none; border-left: solid black 5px;
      -moz-border-radius-topright: 40px;
    -webkit-border-radius-topright: 40px;
    border-top-right-radius: 40px;}


.mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left;
 }
  a:link { text-decoration: none; color: black;  font-family: 'DJGrossNormal'; margin-bottom: 100px; font-size: 1.5em;  }

 .homepage {text-align: justify; font-family: 'permanent_markerregular'; font-size:1.1em; font-weight:80; }
 .navtext { padding-left: 10px; padding-top:15px; }
.slideshow { position:relative; right: -18%; }

.livecoaching { position: relative; right: -20%;  }
.seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; font-family:'Telex'; }
.aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; font-family: 'Telex'; }
#rightimages { position: relative; float: right; }
.contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }

.rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    bottom: 770px;
    background-color: #C8C99F;
    padding: 2px;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px;
}

.win .rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    bottom: 745px;
    background-color: #C8C99F;
    color: black;
    border: solid black 3px;
    padding: 2px;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px; }
.leftcontent { float:left; width: 60%; position: relative; bottom: -1em; }
.win .leftcontent { border: solid black 3px; }
.win .leftcontent { background-color:#C8C99F; }


.clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

.coachingintro { position: relative; right: 0.2em; font-family: 'CaviarDreamsRegular'; font-size:1.5em; text-align:center; font-weight: 400; }
form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-weight:300;
    font-family: Verdana, Geneva, sans-serif;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}

.win form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-weight:300;
    font-family: Verdana, Geneva, sans-serif;
    padding:2px;
    border:solid white 6px;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}



h3:first-letter { font-family: 'KaushanScriptRegular'; font-size: 50px; }
h3 { font-family: 'sofia_pro_lightregular'; }



 article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:Helvetica; }



 a:visited {color:black;}


}

@media (min-width: 320px) and (max-width: 479px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.3em; }
html, body {
    background-color: #CECDB3;
    height: 95%;
    width: 100%;
}

.wrapper {
    background-color: #CECDB3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:60%; height:95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.5em; background-size: contain; position: relative; }


}

@media (min-width: 480px) and (max-width: 599px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }

html, body {
    background-color: #CECDB3;
    width: 100%;
    height:100%;
    overflow: hidden;
}

.wrapper {
    background-color: #CECDB3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:75%; height: 90%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.6em;  position: relative; }

}

@media (min-width: 768px) and (max-width: 1258px) {

html, body { width:100%; height:1500px;}
header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }
body {
    background-color: #CECDB3;

}

.wrapper {
    background-color: #CECDB3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:70%; height: 95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 13%; height: 20%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }

 .navtext { padding-bottom: 15px; }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.9em;  }
article { font-size:0.8em;  position: relative; }


}
@font-face {
    font-family: 'sofia_pro_lightregular';
    src: url('SofiaProLight-webfont.eot');
    src: url('SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProLight-webfont.woff') format('woff'),
         url('SofiaProLight-webfont.ttf') format('truetype'),
         url('SofiaProLight-webfont.svg#sofia_pro_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_slab500';
    src: url('Museo_Slab_500_2-webfont.eot');
    src: url('Museo_Slab_500_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo_Slab_500_2-webfont.woff') format('woff'),
         url('Museo_Slab_500_2-webfont.ttf') format('truetype'),
         url('Museo_Slab_500_2-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'KaushanScriptRegular';
    src: url('KaushanScript-Regular-webfont.eot');
    src: url('KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('KaushanScript-Regular-webfont.woff') format('woff'),
         url('KaushanScript-Regular-webfont.ttf') format('truetype'),
         url('KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams-webfont.woff') format('woff'),
         url('CaviarDreams-webfont.ttf') format('truetype'),
         url('CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBold';
    src: url('Caviar_Dreams_Bold-webfont.eot');
    src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
         url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
         url('Caviar_Dreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsItalic';
    src: url('CaviarDreams_Italic-webfont.eot');
    src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_Italic-webfont.woff') format('woff'),
         url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
         url('CaviarDreams_Italic-webfont.svg#CaviarDreamsItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBoldItalic';
    src: url('CaviarDreams_BoldItalic-webfont.eot');
    src: url('CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_BoldItalic-webfont.woff') format('woff'),
         url('CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
         url('CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DJGrossNormal';
    src: url('DJGROSS-webfont.eot');
    src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
         url('DJGROSS-webfont.woff') format('woff'),
         url('DJGROSS-webfont.ttf') format('truetype'),
         url('DJGROSS-webfont.svg#DJGrossNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'luxi_sansregular';
    src: url('luxisr-webfont.eot');
    src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'),
         url('luxisr-webfont.woff') format('woff'),
         url('luxisr-webfont.ttf') format('truetype'),
         url('luxisr-webfont.svg#luxi_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'blokletters_balpenbalpen';
    src: url('Blokletters-Balpen-webfont.eot');
    src: url('Blokletters-Balpen-webfont.eot?#iefix') format('embedded-opentype'),
         url('Blokletters-Balpen-webfont.woff') format('woff'),
         url('Blokletters-Balpen-webfont.ttf') format('truetype'),
         url('Blokletters-Balpen-webfont.svg#blokletters_balpenbalpen') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'daysregular';
    src: url('Days-webfont.eot');
    src: url('Days-webfont.eot?#iefix') format('embedded-opentype'),
         url('Days-webfont.woff') format('woff'),
         url('Days-webfont.ttf') format('truetype'),
         url('Days-webfont.svg#daysregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'permanent_markerregular';
    src: url('PermanentMarker-webfont.eot');
    src: url('PermanentMarker-webfont.eot?#iefix') format('embedded-opentype'),
         url('PermanentMarker-webfont.woff') format('woff'),
         url('PermanentMarker-webfont.ttf') format('truetype'),
         url('PermanentMarker-webfont.svg#permanent_markerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

这是我的主页 HTML:

   <!DOCTYPE HTML><html lang="en"><head>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
<script src="browserselector.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/Slideshow1blurred.jpg"
var image2=new Image()
image2.src="images/Slideshow2blurred.jpg"
var image3=new Image()
image3.src="images/Slideshow3blurred.jpg"
//-->
</script>
<meta charset="UTF-8">
<title> SocialAdventuring.com  </title>
<link href="CSS/socialpolarities.css" rel="stylesheet" type="text/css">
</head><body>

    <header>
        <h1> Social Adventuring Dot Com </h1>
    </header>

    <nav class="mainnav">
        <div class="navtext">
        <a href="index.html"> HOME </a> <br>
        <a href="aboutUs.html"> ABOUT US </a> <br>
        <a href="contact.html"> CONTACT US </a> <br>
        <a href="coaching.html"> COACHING </a> <br>
        <a href="seminars.html"> SEMINARS </a> <br>
        <a href="blog.html">  BLOG </a> <br>
        </div>
    </nav>

<div class="wrapper">


    <article class="homepage">

        <p> Welcome to socialadventuring.com! The website is currently under construction but expect to see regular blog updates, news and more on our homepage. In the meantime check out what our company is about as well as our products and services geared to making you kick the maximum amount of ass. 
        </p>
    </article>

    <div class="slideshow">

<img src="file:///Users/alexfalconer-athanassakos/Documents/Final%20Assignment/images/Slideshow3blurred.jpg" name="slide" class="theSlideshow">

    </div>

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",4000)
}
slideit()
//-->
</script>

</div>





</body></html>

最佳答案

图像本身在其顶部有一个内边距。

您可以使用负值定位背景，而不仅仅是“顶部”。

例如:

  background: url("/images/HeaderImage.png") 
       no-repeat scroll center -30px transparent;

关于html - 在 CSS 中定位标题图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18264271/

文章推荐： java - 提取指定单词之后的所有单词直到句子结尾

文章推荐： c++ istringstream()函数将字符串转换为int引发错误

文章推荐： html - 无法在 IE10 上获得同源 iframe 主体？

jQuery追加()定位
我必须从我的网站中删除()一些iem，然后将它们追加()回来，但是当我追加它们时，它们出现在不同的地方，而我希望它们完全显示在它们以前的同一个地方是。有什么解决办法吗？这是一个沙箱，请随意更新(注
CSS - 定位
一个。图片 (960x7)b. div(宽度:960，填充:10) 我想定位 (a)，使其距顶部 50 像素，居中。我想将 (b) 放置在 (a) 的正下方，没有空格。我的 CSS 如下: @cha
CSS 定位
放置某物的正确方法是什么？我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
CSS 定位
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭1
CSS 定位
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个，想知道他们是如何实现向下滚动时发生的效果的，菜单栏在滚动前处于一个位置，然后转到顶部并自
CSS:定位
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
slate源码解析（三）-定位
接口定义能够对于文字、段落乃至任何元素的精准定位并做出增删改查，都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
WPF tabitem 定位
例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么？我尝试通过更改边距将第四个 tabitem 向右移动，但这并没有产生好的结
javascript - 眼睛跟随光标 - 定位？
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集，因此归功于编写该部分
arduino - 射频三角测量(定位)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
Java GUI - 定位
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
jQuery Slide Down 定位
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作，但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
javascript游戏 Sprite 定位
我正在尝试创建一个棋盘，并将其放置在屏幕中间，但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上，因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
mysql - 定位、子串查询
我正在尝试从 mysql 中的 2 个字符串点之间提取数据，我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位，“P1=”是起
按钮的 JavaFX 定位
如何在 JavaFX 中设置按钮的位置？我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
iphone - 定位 UIScrollView
我有一个 iPhone 应用程序，我可以在其中显示一系列图像。当用户点击图像时，我需要将该图像带到第一个位置，表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
使用导航栏的 CSS 定位
在下图中，它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框，然后我需要我的图像
html - CSS 定位
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置，所以使用默认值，图像也是
文本和图像在同一行的 CSS 定位
如何将我的文本和图像对齐在同一行？每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
使用页面引用的 CSS 定位
简单的问题，如何定位具有整个页面引用的元素？在我的例子中，我在标题中得到了一个 float 图像，然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在 CSS 中定位标题图片