我有这个html5
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="content">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
我有这个css:
/* ==========================================================================
Author's custom styles
========================================================================== */
.content {
display:block;
background:url (../img/boek.jpg);
width: 100%;
height: 100%;
top: 25%;
left: 25%;
right: 25%;
text-align: center;
position: fixed;
}
但我根本没有看到背景,当然也没有集中在页面上。
鲁洛夫
答案 0 :(得分:1)
您有两个问题:
#
选择器代替.
(类),因为您已在html中将其设置为id
。url
与论证之间的空间。这应该有效:
.content {
background-image: url('../img/boek.jpg');
}
请查看this jsfiddle示例。
如果您还没有,请花些时间学习如何使用开发人员工具栏(Chrome Dev Toolbar,Firebug等)。它可以帮助您快速找到CSS问题的原因,并且可以让您轻松发现您指定的URL中的图像是否正确加载。