引导程序div背景图像

Question

Here is the code used 这是使用的代码

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

Here's the function which reacts once an input of the textfield is changed 这是一旦更改文本字段的输入即会做出反应的函数

$(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");
    });

In the Firebug style is set correctly and picture is loaded. 在Firebug中正确设置样式并加载图片。 However, there's no picture seen. 但是，没有看到图片。

Answer 1

The problem here is that an un-styled div has width 100%, and no height. 这里的问题是未设置样式的div的宽度为100％，没有高度。 Similarly, a span has no width, but height 100% or the text that's in it. 同样，跨度也没有宽度，但是高度为100％或其中的文本。 Either way, if there's nothing in the box, then no background will be displayed. 无论哪种方式，如果框中没有任何内容，则不会显示背景。 You can prove this by adding some text in the div or span. 您可以通过在div或span中添加一些文本来证明这一点。 It the difference between in-line and block elements. 它是嵌入式元素和块元素之间的区别。

So, you either need to specify a height for your div, or a height for the span. 因此，您需要为div指定高度，或者为span指定高度。 That should then create enough space to display the image. 然后，应该创建足够的空间来显示图像。

引导程序div背景图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-05-08 13:40:50

引导程序div背景图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-05-08 13:40:50

解决方案1
1 已采纳 2013-05-08 13:40:50