Anyone who knows css can help me look at this picture, thank you!_html/css_WEB-ITnose

I made a button and placed it on the navigation menu. The button is transparent, but there is an error in the red circle in the picture!

1. This problem occurs in all browsers I use, including IE, MATHON, and Firefox
2. The buttons made with PS have two formats: png format and gif format. This problem will occur in everyone
3. It is implemented with sliding doors, but I have a basic knowledge of css. I don’t think I made a mistake in css knowledge

Is this a bug or what caused it? Is there any solution, thank you!

Reply to the discussion (solution)

Is that about the picture? The corners haven’t been removed, right?

Let’s see if it’s a problem with your picture?

This should be a picture problem

The background of the picture has not been removed. I am sure about this

For large rounded corners, you should use two pictures on the left and right. You can use one picture. When this happens

Is it because of the picture? The corners have not been removed, right?

It’s not the problem with the picture. The picture is just a well-made rounded corner, and there is no red circle error

The picture is not cut well

Picture The background has not been removed. I am sure of this

The background has been removed, leaving only the transparent part

There is no problem with the picture

The problem is as shown in the picture!

Adaptive button, post the style

There is no problem with the picture
Hey, I told you to use two pictures instead of one. The width of the picture on the left should be smaller.
This happens because you used the image background twice. The right border is opaque because the outer background is transparent, while the inner background is transparent.

If you use an image, you cannot control the width of the outer background image.

ok

Good flight strip 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 does not support png transparent background

It is not ie6, but it appears These problems occur in multiple browsers

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

The method is like this, the rest is to adjust it yourself

#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……

There is no effect, it should not be a css problem

You can see the effect directly like this

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}

Test

You can see the effect directly like this

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

I changed it as you did, but it didn’t work. It’s not a css problem

Is there a picture before and the picture has not been changed to a new one?
You can check if this is true in the folder

Obviously the length of the picture is different

Obviously the length of the picture is different

It’s still the original picture, and It’s not a new question. Is this problem a bug?

I just did some research and found that the background image of the adaptive rounded corner button must have a background color to take effect. The left corner can have no background color but There must be

on the right. How about clearing the history? I feel like the individual pictures you posted below are much wider than the actual renderings?

How about clearing the history? I feel like the individual pictures you posted below are much wider than the actual renderings?
It doesn’t work, hey!

Forget it, guys, help me solve this problem and I will give you points


How to change the value of global variables in javascript?

Pop up Yes, three. I want to increase the value of k that pops up by 1 every time I click the button, but why can’t the value of the global variable always be changed?

Haha, it’s not a css problem, it’s a picture. If you zoom in, you can see it. Just cut it out with ps. The problem I once encountered,

How to use javascript Change global variable value?


Dear friends, can you help solve this problem, thank you!

How to change the value of global variables in javascript?


My experimental results are normal

Unless there is a page postback, if the page is posted back, then set k to the background, and js calls the background method to process and get the value of k

1. Clear browser cache files.
2. Check whether the background color is set for the image, or the background color is set for the element below the image.
3. It is best to use pictures in Gif format.

Still not working, hey...

Still not working, hey...

That’s the problem with your picture, use PS to process it again.

I was looking for the problem of background misalignment of adaptive width when button is clicked on Google, and I accidentally saw this post...

You add a padding-right to li: (width of corner) 6px ;

Then add a padding-left to a: the same width value as above, and that’s it.

If you do this, the background image must be wide enough.

Generally, our approach is to split the picture into two lines, and the background of li is just a corner part.

The background of a is a corner horizontal part.

Sorry, I read it wrong. There is nothing wrong with your code, it’s a problem with the picture.
The lower layer displays the button completely and ends directly with the button on the right.
In the upper layer, the background is on the right and the corners are transparent, so the image below is revealed.
It is recommended to make the picture into two rows, the first row only has the left corner, the second row has no left corner, and the right side continues until the corner appears.

For the lower layer, position the background image left top, and position the strong background above right bottom.