当前位置:Gxlcms > html代码 > 背景图片叠加问题,大神给指个路_html/css_WEB-ITnose

背景图片叠加问题,大神给指个路_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:46人阅读

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

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



.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}


我想要的效果:



实际效果:



回复讨论(解决方案)

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

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

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



.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}


我想要的效果:



实际效果:



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

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



.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这个类里面设置了宽高,没充满的部分不透明啊!是不是要设置透明度什么的,我设置了都不行,实在不行就只能让美容重新切图了

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

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


是透明的。。。


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


是透明的。。。


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



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


是透明的。。。


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


然而我只是单单把input元素给干掉,就没有背景色了,加上去就特么的出来白色的边角,心塞

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


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


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


thx~~thx~~ 解决了,加了一个属性就行了,background-color: transparent , 原来是input的默认样式,谢谢热心回答,谢谢哈

人气教程排行