Question

我从标题文件中引入文本并尝试在页脚中设置样式。

<!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。

对此有任何帮助或优化课程的建议将非常受欢迎。

Answer 1

您的代码无法使用（页脚中没有文字），问题并不是那么清楚。无论如何，不透明度是由所有子元素继承的，因此通常不好用。 RGBA颜色更加友好。 E.g。

#footer {background: rgba(0,0,0,0.5);}

这样可以在不影响其他任何内容的情况下为页脚背景提供50％的不透明度。

CSS文本造型怪异

1 个答案: