Question

我在HTML中有一个文本输入字段，属性placeholder：

<input type="text" placeholder="Filter results...">

不幸的是，placeholder属性似乎不起作用？我以为它是在Internet Explorer 9中实现的？您可以在此处查看演示：http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit

此外，-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')";与background-image结合使用时出现问题。在所有其他浏览器中，显示Firefox，Opera，Safari，Chrome，渐变和背景图像。仅在IE 9中，背景图像不存在。我必须排除渐变，然后我可以看到图像。但我能做些什么呢？

以下是带渐变的演示： http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit

没有渐变： http://jsbin.com/esiya3/6/ - http://jsbin.com/esiya3/6/edit

也许有人有想法？

提前谢谢你＆amp;最诚挚的问候。

Answer 1

您可以将渐变滤镜与alpa图像加载器结合使用：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png')
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');

解决渐变图片问题。

Answer 2

你可以使用svg作为背景图片。你应该用svg标签创建你的gradiant＆amp;用etension .svg保存，然后将其加载到css文件中。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <linearGradient id="g">
<stop offset="0" stop-color="blue" />
<stop offset="0.3" stop-color="yellow" />
<stop offset="0.6" stop-color="orange" />
<stop offset="1" stop-color="red" />
  </linearGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</svg>

css文件

div{background-image: url(gradient.svg);}

IE9 - 占位符和背景图像与渐变相结合的问题

2 个答案: