背景图片叠加问题，大神给指个路

[whithorse]

问题：有个大的背景图（A）放在最外层的div，然后这个div里面有个table下面的input，就是登录按钮，这个登录按钮也有个背景图（B），这个背景图B不是矩形的，是有圆角的，美工跟我说圆角是透明的，让我自己调一下，可是我设置了宽度和高度之后，圆角的部分没有透明，而是出现白色的底色，现在想把白色的边角部分去掉，请教各位，怎么把边角的部分设置透明。

PS：图b是圆角的一个图，不是矩形的，设置宽高之后，图片没填满的部分有底色，不透明，我想要透明，即显示图A的背景色。

<div id="login-bg" class="login-cultural-lib" >
	<div class="sub-login">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
		    	<td width="220"><input name="name" id="name" type="text" maxlength="32"  class="name"  tabindex="1"></td>
		    	<td rowspan="3" width="98">
				     <input id='loginBtn' type="button"  value='登录' class="login-btn" tabindex="4">
		    	</td>
				......
				.....
			</tr>
							
		</table>
	</div>
</div>

.login-cultural-lib {
 	cursor: default;
        text-align:left;
 	width:899px;
 	height:507px;
 	background: url(../images/login/login-bg-culturallib.png);
}

.login-btn {
    width: 98px;
    height: 98px;
    background-image: url(../images/login/login-btn.png);
    cursor: pointer;
    border: 0px
}

我想要的效果：



实际效果：

[zpjshiwo77]

你这样写没什么问题，好好检查一下图片是否是圆角透明的。 然后我想吐槽一下，美工做完后就这个样子么~这美工也太水了吧~

[whithorse]

引用 楼主 whithorse 的回复:

问题：有个大的背景图（A）放在最外层的div，然后这个div里面有个table下面的input，就是登录按钮，这个登录按钮也有个背景图（B），这个背景图B不是矩形的，是有圆角的，美工跟我说圆角是透明的，让我自己调一下，可是我设置了宽度和高度之后，圆角的部分没有透明，而是出现白色的底色，现在想把白色的边角部分去掉，请教各位，怎么把边角的部分设置透明。 PS：图b是圆角的一个图，不是矩形的，设置宽高之后，图片没填满的部分有底色，不透明，我想要透明，即显示图A的背景色。

<div id="login-bg" class="login-cultural-lib" >
	<div class="sub-login">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
		    	<td width="220"><input name="name" id="name" type="text" maxlength="32"  class="name"  tabindex="1"></td>
		    	<td rowspan="3" width="98">
				     <input id='loginBtn' type="button"  value='登录' class="login-btn" tabindex="4">
		    	</td>
				......
				.....
			</tr>
							
		</table>
	</div>
</div>

.login-cultural-lib {
 	cursor: default;
        text-align:left;
 	width:899px;
 	height:507px;
 	background: url(../images/login/login-bg-culturallib.png);
}

.login-btn {
    width: 98px;
    height: 98px;
    background-image: url(../images/login/login-btn.png);
    cursor: pointer;
    border: 0px
}

我想要的效果： 实际效果：

引用 楼主 whithorse 的回复:

问题：有个大的背景图（A）放在最外层的div，然后这个div里面有个table下面的input，就是登录按钮，这个登录按钮也有个背景图（B），这个背景图B不是矩形的，是有圆角的，美工跟我说圆角是透明的，让我自己调一下，可是我设置了宽度和高度之后，圆角的部分没有透明，而是出现白色的底色，现在想把白色的边角部分去掉，请教各位，怎么把边角的部分设置透明。 PS：图b是圆角的一个图，不是矩形的，设置宽高之后，图片没填满的部分有底色，不透明，我想要透明，即显示图A的背景色。

<div id="login-bg" class="login-cultural-lib" >
	<div class="sub-login">
		<table cellspacing="0" cellpadding="0" border="0">
			<tr>
		    	<td width="220"><input name="name" id="name" type="text" maxlength="32"  class="name"  tabindex="1"></td>
		    	<td rowspan="3" width="98">
				     <input id='loginBtn' type="button"  value='登录' class="login-btn" tabindex="4">
		    	</td>
				......
				.....
			</tr>
							
		</table>
	</div>
</div>

.login-cultural-lib {
 	cursor: default;
        text-align:left;
 	width:899px;
 	height:507px;
 	background: url(../images/login/login-bg-culturallib.png);
}

.login-btn {
    width: 98px;
    height: 98px;
    background-image: url(../images/login/login-btn.png);
    cursor: pointer;
    border: 0px
}

我想要的效果： 实际效果：

美工做出来的效果还行，但是切完图放进来就就这样了，圆角应该是透明的，我在login-btn这个类里面设置了宽高，没充满的部分不透明啊！是不是要设置透明度什么的，我设置了都不行，实在不行就只能让美容重新切图了

[zpjshiwo77]

不是透明度的问题，都说了你仔细检查一下这张图片，白色部分到底是透明的还是白色的~

[whithorse]

引用 3 楼 zpjshiwo77 的回复:

不是透明度的问题，都说了你仔细检查一下这张图片，白色部分到底是透明的还是白色的~

是透明的。。。

[zpjshiwo77]

引用 4 楼 whithorse 的回复:

[quote=引用 3 楼 zpjshiwo77 的回复:] 不是透明度的问题，都说了你仔细检查一下这张图片，白色部分到底是透明的还是白色的~

是透明的。。。[/quote] 如果真是透明的，你就好好检查它的父级元素有没有设定背景颜色，你这按钮的样式写得是没有什么问题的。 再给你一个免费的小建议，用不到透明图片的地方最好切成jpg格式图片，png图片会比jpg图片大，这样用户加载起来会变慢。

[whithorse]

引用 5 楼 zpjshiwo77 的回复:

[quote=引用 4 楼 whithorse 的回复:]
[quote=引用 3 楼 zpjshiwo77 的回复:]
不是透明度的问题，都说了你仔细检查一下这张图片，白色部分到底是透明的还是白色的~

是透明的。。。[/quote]
如果真是透明的，你就好好检查它的父级元素有没有设定背景颜色，你这按钮的样式写得是没有什么问题的。
再给你一个免费的小建议，用不到透明图片的地方最好切成jpg格式图片，png图片会比jpg图片大，这样用户加载起来会变慢。[/quote]
然而我只是单单把input元素给干掉，就没有背景色了，加上去就特么的出来白色的边角，心塞

[小小农民]

实在不行就不要button控件么，直接用image，再给image加点击事件

[zpjshiwo77]

引用 6 楼 whithorse 的回复:

那是input在浏览器下的默认样式，重写一下样式就好了。或者向楼上说的一样，用其他标签。

[whithorse]

引用 8 楼 zpjshiwo77 的回复:

[quote=引用 6 楼 whithorse 的回复:]

那是input在浏览器下的默认样式，重写一下样式就好了。或者向楼上说的一样，用其他标签。[/quote] thx~~thx~~ 解决了，加了一个属性就行了，background-color: transparent ， 原来是input的默认样式，谢谢热心回答，谢谢哈