请问老师这个效果如何实现啊?

请问老师这个效果如何实现啊?

http://img1.sycdn.imooc.com//climg/5cff23590001c04504250167.jpg

这个效果  表单的每一个输入框都是透明的  但是我写出来都是白色的背景  挡住了下面的图片  清群老师这个透明的效果怎么实现呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
SEO老鼠 2019-06-18 21:59:58
.input{
	width: 510px;
	height: 372px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -255px;
	margin-top: -186px;
	z-index: 2;
}
.input input{
	display: block;	
	width: 505px;
	height: 39px;
	border: 2px solid #A9A9A9;
	margin-bottom: 20px;
	background-color:transparent;
}
.input textarea{
	display: block;
	width: 505px;
	height: 115px;
	border: 2px solid #A9A9A9;
	margin-bottom: 20px;
	background-color:transparent;
}
.input .submit{
	width: 123px;
	margin:0 auto;
	color: #A9A9A9;
}
.input input:hover{
	border: 2px solid #07cbc9;
}
.input textarea:hover{
	border: 2px solid #07cbc9;
}
.input .submit:hover{
	background: #07cbc9;
	border: none;
}

送你了,自己研究下。

炫到飞起的咖啡 2019-06-16 14:32:22
input[type=text] {
width: 505px;
height: 39px;
border:2px solid rgb(128, 128, 128);
background-color: transparent; /*设置为透明色*/
}


好帮手慕码 2019-06-13 10:16:33

同学你好!

(1)关于输入文字看不见。同学看下表单是不是被覆盖了,表单的层级要高于遮罩层和背景图片(层级高其它的时候文字是不会看不到的)如果是文字颜色太暗,可以给input设置color来修改输入文字的颜色

(2)一般来说是不会修改默认文字的颜色的(placeholder)因为它有兼容性,但是也可以修改,可以参考一下:

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		color: yellow; 
		}

		::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: yellow;
		}

		input:-ms-input-placeholder,
		textarea:-ms-input-placeholder {
		color:yellow;
		}

		input::-webkit-input-placeholder,
		textarea::-webkit-input-placeholder {
		color:yellow;
		}

如果帮助到了你 欢迎采纳 祝学习愉快~

好帮手慕码 2019-06-11 13:32:09

同学你好!

同学可以试一下给input,textarea等设置背景颜色透明的样式。

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 慕田峪2568142 #1
    老师 我用了 background-color: rgba(0,0,0,1); 虽然有背景了 但是文字还是看不见 而且输入的文字也看不见 请问这个怎么解决啊?
    2019-06-13 09:53:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师