Fatal编程技术网

Javascript 引导div背景图像

javascript html css twitter-bootstrap

Javascript 引导div背景图像,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,下面是使用的代码 <!DOCTYPE html> <html> <head> <title>Registration</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="styleshee

下面是使用的代码

<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet"/>
<link href="twitter-bootstrap/docs/assets/css/docs.css" rel="stylesheet">
<link href="twitter-bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<style type="text/css">
    .container
    {
        width: 750px;
        height : 300px;
        margin-top : 50px;
    }
</style>
</head>
<body>
<div class = "container">
<div class = "well" style = "box-shadow : 0 1px 10px rgba(0,0,0,1.0);">    
    <form id = "reg" class = "form-horizontal" method = "post" action = "reg.php">
        <legend>Registration form</legend>      
        <div class = "control-group">
            <label class = "control-label">Login name</label>
            <div class = "controls">
                <div class = "input-prepend">
                    <span class = "add-on"><i class = "icon-user"></i></span>
                        <input type = "text" class = "input-xlarge" id = "login_name" name = "login_name" placeholder = "Login name"><div id = "name_inspector"></div>
                </div>
            </div>
        </div>
在Firebug中，正确设置样式并加载图片。但是，没有看到任何图片。

这里的问题是，未设置样式的div的宽度为100%，没有高度。类似地，跨距没有宽度，但有100%的高度或其中的文本。无论哪种方式，如果框中没有任何内容，则不会显示背景。可以通过在div或span中添加一些文本来证明这一点。它显示了内嵌元素和块元素之间的差异

因此，您需要为div指定一个高度，或者为span指定一个高度。这样就可以创建足够的空间来显示图像。

可能是名称和id相同吗？是否有冲突的可能？没有，名称是页面中唯一一个具有此名称的id。我更新了代码。是的，我刚刚去过。输出为，没有图片。此div没有样式。我使用它作为一个块来动态检测一个名字是否可以通过改变图片自由注册。 
$(document).ready(function(){
    //$('#name_inspector').css('background-image', 'url(img/name-is-free.png)');
    $("#login_name").change(
    function()
    {
        $('#name_inspector').css('background-image', 'img/ajax-loader-arrows.gif');
        $.get(
        "is_usr_name_free.php?login_name="+$('#login_name').val(), {},
        // At success.
        function(data)
        {
            var style_arr = data.split('@');
            alert(style_arr[0]+style_arr[1]);
            $('#name_inspector').css(style_arr[0], style_arr[1]);
        }, "html");
    });