Html 在CSS中定位标题图像
我试图使用我在CS6 Illustrator中创建的横幅作为我网站的标题。我把它作为背景，设置为“顶部”位置和“不重复”，但出于某种原因，它出现在标题区域的底部，在图像和标题区域的边界之间有300px的填充。我增加了标题区域的高度，这样你们就可以看到背景图像的渲染深度……它位于文本区域的下方，而不是作为文本的背景出现（这对较小的图像很好） 这是我的网站 以下是我的CSS：Html 在CSS中定位标题图像,html,css,adobe-illustrator,Html,Css,Adobe Illustrator,我试图使用我在CS6 Illustrator中创建的横幅作为我网站的标题。我把它作为背景，设置为“顶部”位置和“不重复”，但出于某种原因，它出现在标题区域的底部，在图像和标题区域的边界之间有300px的填充。我增加了标题区域的高度，这样你们就可以看到背景图像的渲染深度……它位于文本区域的下方，而不是作为文本的背景出现（这对较小的图像很好） 这是我的网站 以下是我的CSS： @media (min-width: 1420px) { header { font-family: 'DJGross
@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;
}
<!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>
社交广告网站
社交冒险网站
欢迎来到socialadventuring.com！该网站目前正在建设中，但预计会定期在我们的主页上看到博客更新、新闻和更多内容。同时，看看我们的公司在做什么，看看我们的产品和服务是如何让你最大限度地发挥作用的。
background: url("/images/HeaderImage.png")
no-repeat scroll center -30px transparent;