我如何在HTML文本前面添加图片？ [英] How can I bring an image in front of text HTML?
本文介绍了我如何在HTML文本前面添加图片？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在用Adobe Dreamweaver CS6在HTML和CSS中创建一个网站模板，我创建了一个包含位置的头：fixed; 声明，但是当我实时查看代码时，出于某种原因，我的虚拟文本显示在图像的顶部。这是HTML中的常见问题吗？是否有解决此问题的方法？
我的代码部分
我的HTML：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
<！ - TemplateBeginEditable name =doctitle - >
< title> DC个人培训< / title>
<！ - TemplateEndEditable - >
<！ - TemplateBeginEditable name =head - >
<！ - TemplateEndEditable - >
< link href =../ CSS / styles.css =stylesheettype =text / css/>
< / head>
< body>
< div class =header>
<！ - end .header - >< img src =../ Images / header.pngwidth =1567height =177alt =Dan Christopherson Personal Training/ >< / DIV>
< div class =container>
< div class =content>
< h1><！ - TemplateBeginEditable name =Heading - > Heading<！ - TemplateEndEditable - >< / h1>
<！ - TemplateBeginEditable name =Content - >只需
<！ - end .content - >
dummy text。<！ - TemplateEndEditable - >< / div>
< div class =footer>
版权所有丹·克里斯托弗森个人培训，2013.保留所有权利。网站由Xtreme Web Design提供。
<！ - end .footer - >< / div>
<！ - end .container - >< / div>
< / body>
< / html>
我的CSS：
@charsetutf-8;
body {
font：100％/ 1.4 Verdana，Arial，Helvetica，sans-serif;
background-color：＃000000;
保证金：0;
padding：0;
颜色：#FFF;
}
ul，ol，dl {
padding：0;
保证金：0;
}
p {
margin-top：0;
padding-right：15px;
padding-left：15px;
border：none;
}
a：link {
color：＃42413C;
text-decoration：下划线;
}
a：visited {
color：＃6E6C64;
text-decoration：下划线;
}
a：hover，a：active，a：focus {
text-decoration：none;
}
.container {
width：960px;
background-color：＃000000;
margin：0 auto;
}
.header {
background-color：;
位置：固定;
top：0;
vertical-align：top;
}
.sidebar1 {
float：left;
width：180px;
background-color：#EADCAE;
padding-bottom：10px;
}
.content {
padding：10px 0;
width：950px;
float：left;
}
.sidebar2 {
float：left;
width：180px;
background-color：#EADCAE;
padding：10px 0;
}
.content ul，.content ol {
padding：0 15px 15px 40px;
}
ul.nav {
list-style：none;
border-top：1px solid＃666;
margin-bottom：15px;
}
ul.nav li {
border-bottom：1px solid＃666;
}
ul.nav a，ul.nav a：visited {
padding：5px 5px 5px 15px;
display：block;
width：160px;
text-decoration：none;
背景颜色：＃C6D580;
}
ul.nav a：hover，ul.nav a：active，ul.nav a：focus {
background-color：＃ADB96E;
颜色：#FFF;
}
.footer {
padding：10px 0;
background-color：＃000000;
职位：亲属;
明确：两者;
颜色：＃8cc638;
}
.fltrt {
float：right;
margin-left：8px;
}
.fltlft {
float：left;
margin-right：8px;
}
.clearfloat {
clear：both;
height：0;
font-size：1px;
line-height：0px;
}
预先致谢
解决方案
在位置：fixed; z-index：100; >在你的CSS元素规则中。
I'm in the process of creating a website template with Adobe Dreamweaver CS6 in HTML and CSS, and I have created a header with the position:fixed; declaration, but when I view the code live, my dummy text shows over the top of the image for some reason. Is this a common problem in HTML? Is there a fix for this?
My code sections
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>DC Personal Training</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<!-- end .header --><img src="../Images/header.png" width="1567" height="177" alt="Dan Christopherson Personal Training" /></div>
<div class="container">
<div class="content">
<h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
<!-- TemplateBeginEditable name="Content" -->Just some
<!-- end .content -->
dummy text.<!-- TemplateEndEditable --></div>
<div class="footer">
Copyright Dan Christopherson Personal Training, 2013. All rights reserved. Website by Xtreme Web Design.
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
My CSS:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #FFF;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #000000;
margin: 0 auto;
}
.header {
background-color: ;
position: fixed;
top: 0;
vertical-align: top;
}
.sidebar1 {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 950px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
.footer {
padding: 10px 0;
background-color: #000000;
position: relative;
clear: both;
color: #8cc638;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Thanks in advance.
解决方案
Add z-index: 100; after position: fixed; in your css rule for your header element.
这篇关于我如何在HTML文本前面添加图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
