我正在从字幕文件中引入文本并尝试在页脚中设置其样式。
图片示例: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>
样式.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是所有子元素都继承的，所以一般不好用。 RGBA 颜色更友好。例如
#footer {background: rgba(0,0,0,0.5);}
这将为页脚背景提供 50% 的不透明度，而不会影响任何其他内容。
关于CSS 文本样式怪异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16849685/