欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

懂css的帮我看看这个图,谢谢!_html/css_WEB-ITnose

程序员文章站 2022-05-06 08:22:15
...
我做了一个按钮放在导航菜单上,按钮是透明的,可是如图红圈处出现了错误!

1.我用的浏览器都出现这个问题,IE、MATHON遨游、firefox都这样
2.用PS做的按钮,格式有两个png格式的和gif格式的,两个都会出现这个问题
3.用滑动门实现的,但我是有css基础的,我自认为自己不是在css知识上出错

这个是不是bug,还是什么导致的?有什么解决办法,thankyou!


回复讨论(解决方案)

那是图片的事吧?角没去掉吧

看看是不是你图片的问题?

这个应该是图片问题吧

图片背景没有去掉 这个我肯定

圆角幅度大的应该用左右两张图片,你用一张图片就会出现这种情况

那是图片的事吧?角没去掉吧

不是图片的问题,图片就是一个做好的效果圆角,并没有出现红圈圈的错误

图片没切割好

图片背景没有去掉 这个我肯定

背景去掉了,留下就是透明部分了


图片没有问题


问题如图!

自适应按钮,把样式发上来吧

图片没有问题
哎,都告诉你用两张图片,不要用一张图片,左边的图片宽度小点。
出现这种情况是因为你用了两次图片背景,右边边框不透明是因为外层的背景,内层的背景是透明的。

如果你用一张图片,无法控制外层背景图片的宽度。

ok

好航条的CSS:

#menu{
background:url(../images/menu.jpg) no-repeat 0 0;
width:1000px;
height:40px;
text-align:center;
padding-left:15px;
}
#menu li{
float:left;
margin:0 50px;
}
#menu li a{
display:block;
text-decoration:none;
color:white;
vertical-align:middle;
line-height:40px;
}
#menu li a:hover{
background:url(../images/menu_hover.gif) no-repeat top left;
vertical-align:middle;
padding:0 0 0 10px;
margin:-10px;
color:#333;
margin-top:5px;
}
#menu li a:hover strong{
display:block;
background:url(../images/menu_hover.gif) no-repeat top right;
line-height:30px;
vertical-align:middle;
padding:0 10px 0 0;
margin-top:5px;
}

ie6 不支持png透明背景

不是ie6,但出现了这些问题,而且多个浏览器出现这种状况

#menu li a:hover{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

#menu li a:hover strong{background:url(../images/menu_hover.gif) right 0; padding-right:10px; margin-left:10px; float:left; height:30px}

方式是这样,剩下自己调

#menu li a:hover{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

#menu li a:hover strong{background:url(../images/men……

没有效果,应该不是css问题

直接在这样就能看到效果

a{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

a strong{background:url(../images/menu_hover.gif) right 0; padding-right:10px; margin-left:10px; float:left; height:30px}

测试

直接在这样就能看到效果

a{background:url(../images/menu_hover.gif) left 0; color:#fff; text-decoration:none; line-height:30px; height:30px; float:left}

a strong{background:url(../images/menu_hover.gif) rig……

照你的改了,但是没有效果,不是css问题

是不是以前有图片,图片没改成新的?
可以看看文件夹下是不是真有这事

明显图片长度就不一样

明显图片长度就不一样

还是原来的图片,并不是改成新的问题,究竟出现这个问题是不是bug?

刚才研究了一下,自适应圆角按钮的背景图是要有背景色才能生效,左边的角可以没有背景色但右边一定要有

清一下历史记录试试呢?我咋感觉你下面发的单独的图片比实际效果图要宽许多呢?

清一下历史记录试试呢?我咋感觉你下面发的单独的图片比实际效果图要宽许多呢?
无效啊,哎!

算了,亲们帮我解决这个问题我帮分数给你们


javascript中如何改变全局变量值?

弹出来是三,我想实现每单击一次按钮弹出的k值增加1,但是全局变量的值怎么老是改不了?

呵呵,不是css的问题,是图片,你在放大些,就能看的出,用ps切掉就行了,我曾经遇到的问题,

javascript中如何改变全局变量值?


var k=2;??不是全局?量吧.

javascript中如何改变全局变量值?


var k=2;??不是全局?量吧.

亲!我的问题你没有看清楚,每一次点击按钮弹出k的值增加1
var k=2这个是声明全局变量!但是要在explus函数把全局变量k的值+1却有没有效果,全局变量k的值还是2!

所以要怎样改变全局变量k的值,我那样做全局变量k没有改变!

两个方法
1,把透明图片做成不透明的
2,将图片切开上下错位

(--
----------)
就像这个样子,修改background-position

亲们,这个问题能否帮帮忙解决,thankyou!

javascript中如何改变全局变量值?

亲们,这个问题能否帮帮忙解决,thankyou!

javascript中如何改变全局变量值?


我的实验结果表示很正常

除非有页面回发了,要是页面回发,那就把k设置到后台去,js调用后台的方法处理并获取k的值

1.清理浏览器缓存文件。
2.看看是不是给图片设置了背景色,或是在图片下层的元素设置了背景色。
3.最好用Gif格式的图片。

还是不行,哎...

还是不行,哎...
那就是你图片的问题了,用PS重新处理一下。

正在google找button点击时自适应宽度的背景错位问题,无意中看到这个帖子……

你给li加一格padding-right:(转角的宽度)6px;
然后给a加一个padding-left:和上面相同的宽度值,就好了。

你这样做,要求背景图足够宽。
一般我们的做法的把图片拆成两行,li的背景只是一个转角部分。
a的背景是一个转角+横铺部分。

抱歉,看错了,你代码没什么问题,是图片的问题。
下面的层,完整显示了按钮,直接铺到了右侧按钮结束。
上面的层,背景居右,边角透明,所以透出了下面的图。
建议把图片作成两行,第一行只有左侧边角,第二行没有左侧边角,右侧一直到出现边角为止。

下面的层,背景图定位left top,上面的strong的背景定位right bottom就好了。