CSS background-image in IMG elements not displaying in IE_问答_开发者

CSS background-image in IMG elements not displaying in IE

开发者 https://www.devze.com 2023-03-10 13:23 出处：网络

I have an IMG tag with an background-image property. Whilst both images display in FF, only the IMG src image displays in IE. At this stage I am not concerned with positioning or anything, I just want

Here is my basic test HTML:

<html>
<head>
    <title>carmen's test page </title>
    <style>
        .icon {
            display: block;
            background-image: url('drop-yes.gif');
            background-repeat: no-repeat;
            padding: 200px 200px 200px 200px;
            margin: 20px 20px 20px 20px;
        } 
    </style>
</head>
<body>    

<div> <img class="icon" src="drop-开发者_C百科no.gif"/> </div>

</body>
</html>

Any help greatly appreciated. Thank you

I wouldn't suggest giving the <img> css class background and a src; rather place it in a <div> instead and manipulate that as you need. You should get a result like this: jsFiddle

I think maybe your Doctype is a problem

Working Example

in this test it works fine in IE with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.icon {
   display: block;
   background: url(http://dummyimage.com/450x450/dad/fff&text=yes) no-repeat;
   padding: 200px 200px 200px 200px;
   margin: 20px 20px 20px 20px;
} 
</style>
</head>
<body>
<div> <img class="icon" src="http://dummyimage.com/50x50/444/fff&text=no"/> </div>
</body>
</html>