我正在从标题文件中引入文本并尝试在页脚中设置它的样式。
图片示例：金星图像
<!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>
样式.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。
对此的任何帮助或有关优化课程的建议将不胜感激。