0

我有一个 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

也许有人有想法？

提前感谢您和最诚挚的问候。

4

2 回答 2

3

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

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

解决梯度图像问题。

于 2011-01-27T09:05:34.950 回答
2

您可以使用 svg 作为背景图像。您应该使用 svg 标签创建渐变并使用 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);}
于 2012-11-05T07:09:32.463 回答