Heim > Web-Frontend > HTML-Tutorial > input背景透明的穿透问题_html/css_WEB-ITnose

input背景透明的穿透问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:42:54
Original
1813 Leute haben es durchsucht

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.box{position:relative;}.bg{position:absolute; left:5px; top:5px; z-index:-1; font-size:12px;}input{	height:20px;	background-color:transparent;	border: 1px solid #F00;}</style></head><body><div class="box"><span onClick="alert('我是背景')" class="bg">文明扯淡,利国利民。</span><input type="text" /></div></body></html>
Nach dem Login kopieren


当一个input框背景透明时(background-color:transparent;),在ie下会被穿透,而在chrome等浏览器下则不会,有什么方法可以解决?


回复讨论(解决方案)

有人知道吗?

可以用半透明的图片作为input的背景,而不是用文字,就可以解决

可以用半透明的图片作为input的背景,而不是用文字,就可以解决

+1
或者试试滤镜吧

把input中的背景图片设置成和div的背景图片相同的即可

引用 2 楼 jellday 的回复:

可以用半透明的图片作为input的背景,而不是用文字,就可以解决


+1
或者试试滤镜吧

试过滤镜,半透明和渐变,都是穿透。

可以用半透明的图片作为input的背景,而不是用文字,就可以解决

你说的是可以的,用一像素半透明png,不过这个方案,不能用css图片拼合,在ie6也不给力。所以我想有没有滤镜还是什么,可以不穿透的。

可以用半透明的图片作为input的背景,而不是用文字,就可以解决

把文字写进图片,用图片做背景,不是很ok,因为那文字随时会变,不能重用。你可以参考下mail.qq.com,他们在ie下,背景也是穿透的,他们的方案是点击到背景文字时候,再fouse到上面的输入框。

我解决办法很简单:给input加上属性:

background:url(0) no-repeat;
Nach dem Login kopieren

兼容所有浏览器,呵呵!

很好很好给力

我解决办法很简单:给input加上属性:
CSS code1background:url(0) no-repeat;
兼容所有浏览器,呵呵!
不错,我的问题解决了

LZ你是我的神啊,帮我解决大问题了!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage