It seem there is a white frame around the img button, I don’t know why. I try to do something with the png did not work.
How to get rid of the white frame?
my code
<code><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pokemon cards </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="back">
<div class="title">
<h1>pokemon cards</h1>
</div>
<div class="hidden">
<button>BLABLA</button>
</br>
<button>BLABLABLA</button>
</div>
<div class="menu">
<button >
<img src="images/white-hamburger-menu-icon-27.png" alt="menu button">
</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pokemon cards </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="back">
<div class="title">
<h1>pokemon cards</h1>
</div>
<div class="hidden">
<button>BLABLA</button>
</br>
<button>BLABLABLA</button>
</div>
<div class="menu">
<button >
<img src="images/white-hamburger-menu-icon-27.png" alt="menu button">
</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pokemon cards </title>
<link rel="stylesheet" href="style.css">
</head>
<body class="back">
<div class="title">
<h1>pokemon cards</h1>
</div>
<div class="hidden">
<button>BLABLA</button>
</br>
<button>BLABLABLA</button>
</div>
<div class="menu">
<button >
<img src="images/white-hamburger-menu-icon-27.png" alt="menu button">
</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
<code>.title{
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: aliceblue;
position: relative;
text-align: center;
}
.back{
background-color: rgb(22, 22, 22);
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hidden{
display: none;
}
.menu{
position: absolute;
padding: 0;
transform: translateY(-50%);
top: 30px;
display: block;
border-width: 0px
}
.menu img{
width: 100px;
height: 100px;
background: none;
background-color: transparent;
border-color: #333;
display: block;
}
</code>
<code>.title{
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: aliceblue;
position: relative;
text-align: center;
}
.back{
background-color: rgb(22, 22, 22);
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hidden{
display: none;
}
.menu{
position: absolute;
padding: 0;
transform: translateY(-50%);
top: 30px;
display: block;
border-width: 0px
}
.menu img{
width: 100px;
height: 100px;
background: none;
background-color: transparent;
border-color: #333;
display: block;
}
</code>
.title{
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: aliceblue;
position: relative;
text-align: center;
}
.back{
background-color: rgb(22, 22, 22);
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.hidden{
display: none;
}
.menu{
position: absolute;
padding: 0;
transform: translateY(-50%);
top: 30px;
display: block;
border-width: 0px
}
.menu img{
width: 100px;
height: 100px;
background: none;
background-color: transparent;
border-color: #333;
display: block;
}
I just started to learn code. I hope anyone can teach me. It says my posts is mostly code so I’m gonna add some details.
First I thought is beacause the image is jpeg so I change it to png but it did not work either.
New contributor
一团空气 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
This is because button elements are styled by default with a border.
You just need to remove it:
<code>.menu button {
border: none;
}
</code>
<code>.menu button {
border: none;
}
</code>
.menu button {
border: none;
}
2