[英]CSS IE7 Background
I have the CSS: 我有CSS:
.dot-preview {
background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
}
but IE 7/8/9 don't show the image. 但IE 7/8/9不会显示图片。
Called from: 致电:
<img class="dot-preview">
What is wrong with my code? 我的代码有什么问题? It is IE bug? 是IE错误?
Assigning background to empty image tag makes very little sense. 将背景分配给空白图片标签几乎没有任何意义。 Use <div>
element instead and the key is to give it proper width and height: 请使用<div>
元素,关键是为其赋予适当的宽度和高度:
<div class="dot-preview"></div>
And in the CSS: 在CSS中:
.dot-preview {
width: 300px;
height: 300px;
/* ... */
}
Put the correct image width and height and it should work fine. 放置正确的图像宽度和高度,它应该可以正常工作。
Try This 尝试这个
HTML HTML
<img class="dot-preview" />
css CSS
.dot-preview {
background:#000 url("../images/dot.png") repeat scroll 0 0;
}
Set a height and width to your image. 设置图像的高度和宽度。
.dot-preview {
background: url("../images/dot.png") no-repeat scroll 0 0 transparent;
height: 100px;
width: 100px;
}
you might also want to have a transparent 2x2px image in the src of your image, or else IE will show a "not found" icon 您可能还希望在图像的src中有一个透明的2x2px图像,否则IE会显示一个“未找到”图标
EDIT: 编辑:
in IE, transparent placeholders should be 2x2px wide. 在IE中,透明占位符的宽度应为2x2px。 as they create a visual bug if they are 1px wide 因为它们的宽度为1像素时会产生视觉错误
Do the following: 请执行下列操作:
HTML HTML
<img class="dot-preview" />
CSS CSS
.dot-preview {
background: url("../images/dot.png") repeat scroll 0 0 transparent;
display:block;
width: 800px;
height: 600px;
}
You can change the width and height as you like 您可以根据需要更改宽度和高度
.dot-preview {
background-image: url("../images/dot.png");
background-repeat: no-repeat;
display:block;
width: 800px;
height: 600px;
}
Basically you should have display block
for the class you want to have background-image, or you can have this whole thing in div with class .dot-preview
基本上,您应该为要具有背景图像的类提供display block
,或者可以通过.dot-preview
类将整个内容放在div中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.