Will the background image in span be displayed if the float attribute is removed? _html/css

Will the background image in span be displayed if the float attribute is removed? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:13:21

Original

1106 people have browsed it

I am new to CSS and encountered a strange problem. After removing the float, I cannot see the background image, and the span element cannot be found on firebug. What is the reason?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>文本框中的事件应用</title>    <style type="text/css">            .spnInit{width:179px;height:40px;line-height:40px;float:right;background: url('Images/pic_Email_ok.gif') no-repeat;}    </style></head><body>           <span id="spnTip" class="spnInit"></span></body></html>

Copy after login

Reply to the discussion (solution)

In addition, if the float attribute is not used, how to display the background image?

Isn’t this okay?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>文本框中的事件应用</title>    <style type="text/css">            .spnInit{width:179px;height:40px;line-height:40px;background: url('Images/pic_Email_ok.gif') no-repeat;}    </style></head><body>           <span id="spnTip" class="spnInit"><pre class="brush:php;toolbar:false">dfasdfasdssssssssssssssssssssssssssssdfasdfsdfasdfasdfasdfas

Copy after login

span is a line element. When there is no content inside, it has no height and width, so it disappears.
Set span to display:block, and the set height and width will work even if there is no content.

span is a line element. When there is no content inside, it has no height and width, so it disappears.
Set span to display:block, and the set height and width will work even if there is no content.
Correct answer

But why does the float attribute also affect whether span is displayed without content? I’m really confused about this

. . I know. . You can set its display: attribute inline-block;

After adding float, it will become a block element

If there is only one, just put the body directly,
OK Adjust the position of your background like this: background-position:-50px -30px ;/*-50px means horizontally indenting 50px to the left, -30px means vertically indenting 30px upward.

Adjust the position. Okay, the background does not need to be floating.

After setting the float, your span will automatically become a block element
and you set the width and height of the span,
so the background image can be seen