所以我只想把背景简单地放在我的页面上,但什么都没发生..背景适用于同一页面上的另一个Div,但不是在身体背景本身上
<!DOCTYPE HTML>
<html>
<head>
<title>iDeas.com</title>
<link rel="stylesheet" href="css/uikit.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body background="background.jpg" style="font-family: 'Dosis', sans-serif;">
<div id="main_container" >
<div id="sub_container">
<div id="header_container">
<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
</div>
<div id="body_container">
<div id="form_container">
<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
<form autocomplete="off" method="post">
<div class="uk-form-row">
<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;"> </span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
</div>
<div class="uk-form-row">
<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;"> </span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
</div>
<div class="uk-form-row">
<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
</div><br> <br>
<div class="uk-form-row">
Dont have an account..? Register <a href="">Here</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="footer_container">
</div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:2)
在指定<!DOCTYPE HTML>
时,您要告诉浏览器使用HTML5呈现您的网页。 background
属性在HTML4中已弃用,在HTML5中不再存在。
执行此操作的最佳方法是改为包含一些CSS:
body {
background: url(background.jpg);
}
要将此功能纳入您的网页,您可以使用style
元素,将以下内容放入您的页面<head>
:
<style type="text/css">
/* Your CSS here. */
</style>
或者创建一个单独的.css
文件,并使用<link>
元素将其包含在您的网页上:
<link rel="stylesheet" href="myStylesheet.css">
body {
background: url(http://placehold.it/64x64);
}
&#13;
如果您确实坚持使用内联样式,则可以改为使用HTML style
属性。这通常是不好的做法,因为单独的CSS文件将更容易维护:
<body style="background: background.jpg">
...
</body>
答案 1 :(得分:0)
要使用<body>
标记在后台显示图片,您需要这样做:
<body style="background-image:">
答案 2 :(得分:0)
您不必篡改uikit css文件,您可以创建自己的.css并将其附加到您的HTML中。
如果您的背景未显示,可以使用<html class='uk-height-1-1'>
和<body class='uk-height-1-1'>
答案 3 :(得分:-1)
<!DOCTYPE HTML>
<html>
<head>
<title>iDeas.com</title>
<link rel="stylesheet" href="css/uikit.min.css"/>
<link href='http://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body style="font-family: 'Dosis', sans-serif;background:url(http://www.h3dwallpapers.com/wp-content/uploads/2014/11/Plain_Background_06.jpg)">
<div id="main_container" >
<div id="sub_container">
<div id="header_container">
<h1 class="uk-h1" style="font-family:'Shadows Into Light',cursive; font-size:110px;margin-left:29%;margin-top:120px;position:absolute;">Welcome To <span style="color:yellow">i</span>Deas.com</h1>
</div>
<div id="body_container">
<div id="form_container">
<div id="form_position" style="position:absolute; margin-left:42%; margin-top:300px;" >
<div class="uk-form" style="padding:50px 50px 50px 50px; background:url('img/triangle_bg.jpg'); border-radius:2px 2px 2px 2px;">
<form autocomplete="off" method="post">
<div class="uk-form-row">
<span class="uk-icon-user uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 17px; background:#E6E6E6;"> </span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:16px;" type="text" name="username" placeholder="Username" required="">
</div>
<div class="uk-form-row">
<span class="uk-icon-lock uk-icon-small" style="border-radius:5px 0px 0px 3px; padding:11px 14px 14px 19px; background:#E6E6E6;"> </span><input autocomplete="off" style="border-radius:0px 3px 3px 0px; font-family: 'Dosis', sans-serif; width:230px; height:45px; font-size:15px;" type="password" name="password" placeholder="********" required="">
</div>
<div class="uk-form-row">
<input class="uk-button" type="submit" name="login" value="Log In" style="width:280px; height:40px; font-size:20px; border-radius:3px 3px 3px 3px">
</div><br> <br>
<div class="uk-form-row">
Dont have an account..? Register <a href="">Here</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="footer_container">
</div>
</div>
</div>
</body>
</html>