input背景透明的穿透问题_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

回复讨论(解决方案)

Home

Web Front-end

HTML Tutorial

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

Jun 21, 2016 am 09:42 AM

<!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>

Copy after login

当一个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;

Copy after login

兼容所有浏览器，呵呵！

很好很好给力

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

LZ你是我的神啊，帮我解决大问题了！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn