【发布时间】：2013-05-31 12:55:47
【问题描述】：
我正在从标题文件中引入文本并尝试在页脚中设置它的样式。
图片示例：Venus image
<!DOCTYPE html>
<html laneg="en">
<head>
<title>Sample page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=100%, height=100%, maximum-scale=1.0, target-densitydpi=device-dpi"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#image01_caption_title").load('./captions.html #image01_caption_title');
jQuery("#image01_artist").load('./captions.html #image01_artist');
jQuery("#image01_caption").load('./captions.html #image01_caption');
});
</script>
</head>
<body>
<img src="./image01_large.jpg" width="3485" height="4656" />
<div id="footer"><span id="caption_title"><div id="image01_caption_title"></span></div><span id="caption_artist"><div id="image01_artist"></div></span><span id="caption"><div id="image01_caption"></div></span></div>
</body>
</html>
style.css
/* BASE SITE STYLE - NOT NEEDED
---------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Cookie);
/* HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
-webkit-user-select: none;
}
@media all and (orientation:landscape) {
#portrait { display: none; }
img {
width:2048px;
height:100%;
}
}
@media all and (orientation:portrait) {
#landscape { display: none; }
img {
width:1536px;
height:100%;
}
}
#header {
position: fixed;
height: 96px;
width: 100%;
background: black;
opacity: 0.5;
left: 0;
top: 0;
}
#caption {
position: fixed;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
text-align: left;
background: transparent;
color: white;
opacity: 1.0;
margin-left: 0px;
margin-top: 0px;
margin-right: 700px;
}
#caption_title {
position: fixed;
font-family: Helvetica, Arial, sans-serif;
background: transparent;
font-size: 36px;
font-weight: bold;
text-align: left;
color: white;
opacity: 1.0;
margin-left: 50px;
margin-top: 15px;
}
#caption_client {
position: fixed;
background: transparent;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
color: white;
opacity: 1.0;
text-indent: 260px;
margin-top: -34px;
}
#footer {
position: fixed;
height: 164px;
width: 2048px;
background: black;
opacity: 0.5;
left: 0;
bottom: 0;
}
我不太明白为什么定位的行为方式是这样的（一个标题元素似乎是从另一个元素继承而来的），而且我无法弄清楚不透明度。我希望文本为纯白色，但它从页脚类继承 0.5 Opacity。
非常感谢您对此提供任何帮助或关于优化类的建议。
【问题讨论】：
-
首先，检查您的 html 标记。
标签： css types position opacity