HTML：如何从图像和文本中删除超链接下划线？
[英]HTML: How do I remove hyperlink underline from an Image and text?
问题描述
After adding some hyperlinks to an Image, it has the underline but I couldn't find a way to remove it.
向图像添加一些超链接后，它有下划线，但我找不到删除它的方法。 First I tried text-decoration: none;首先我尝试text-decoration: none; but I noticed it only works for text, so the image looks like this image但我注意到它只适用于文本，所以图像看起来像这个图像
The "Claro" image has that underline that I cannot remove. “Claro”图像有我无法删除的下划线。
Here is the code:这是代码：
* { background-color: #eeeeee; } #parte1 { background-color: #da291c; } #parte2 { background-color: white; margin: 10px 480px 10px 0px; } #parte3 { background-color: blueviolet; margin: 10px 480px 10px 0px; } #logo { background-color: #da291c; margin-top: 10px; margin-bottom: 10px; } #parte1-samsung { background-color: #da291c; } #parte2-samsung { background-color: white; margin: 10px 480px 10px 0px; } a { text-decoration: none; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="estilos,css" /> <meta name="viewport" content="width=device-width: initial-scale=1" /> <title>Caracteristicas Claro</title> </head> <body> <center> <div id="parte1" class="container"> <a href="https.//tiendaclaro:pe" title="Tienda Claro"> <img src="https.//placehold.jp/200x100.png" alt="Claro" height="50" id="logo" /> </a> </div> </center> <div id="parte2" class="container"> <a href="Web Claro.html" title="Inicio" id="reinicio">Inicio</a> <a href="equipos-samsung.html" title="Samsung" target="_blank" id="resamsung">Samsung</a> </div> <div id="parte3">Aqui iran el equipo y sus caracteristicas</div> </body> </html>
How do I manage to erase that underline of the image and make the other "Inicio" and "Samsung" options to looks like normal text, instead of that purple or blue color?我如何设法删除图像的下划线并使其他“Inicio”和“Samsung”选项看起来像普通文本，而不是紫色或蓝色？
3 个解决方案
解决方案1
4 2022-09-26 05:31:58
What you're referring to as underline is not actually underline.你所说的下划线实际上并不是下划线。
You've added this line in your CSS您已在 CSS 中添加了这一行
* {
background-color: #eeeeee;
}
that means every HTML tag will have this background.这意味着每个 HTML 标签都会有这个背景。 so your image and parent <a> will also have this background color and since the image has a bottom margin this which makes a gap in parent <a> and this gap is filled with the defined background color.因此您的图像和父<a>也将具有此背景颜色，并且由于图像具有底部边距，这在父<a>中产生了间隙，并且该间隙用定义的背景颜色填充。
so what you're seeing is a filled background color, not an underline or border .所以你看到的是填充的背景颜色，而不是下划线或边框。
解决方案2
0 2022-09-26 16:27:29
if you set background-color:#colorname;如果您设置背景颜色：#colorname; within body element selector like.在 body 元素选择器之内。
body {
background-color:#colorname;
}
That means set background colour #colorname;这意味着设置背景颜色#colorname; of your body.你的身体。
But When you will use this css property into universal selector like.但是当您将这个 css 属性用于通用选择器时。
* {
background-color:#colorname;
}
that means set background color #colorname of all element of the web page.这意味着设置 web 页面的所有元素的背景颜色#colorname。
I hope it is helpful for you.我希望它对你有帮助。
* {}
body{
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
解决方案3
-1 2022-09-26 05:46:54
Try adding the background-color: #eeeeee;尝试添加背景颜色：#eeeeee; property to the body tag instead of *属性到 body 标签而不是 *
body{ background-color: #eeeeee; } #parte1{ background-color: #da291c; } #parte2{ background-color: white; margin: 10px 480px 10px 0px; } #parte3{ background-color: blueviolet; margin: 10px 480px 10px 0px; } #logo{ background-color: #da291c; margin-top: 10px; margin-bottom: 10px; } #parte1-samsung{ background-color: #da291c; } #parte2-samsung{ background-color: white; margin: 10px 480px 10px 0px; } a{ text-decoration: none; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilos,css"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title> Caracteristicas Claro</title> </head> <body> <center> <div id="parte1" class="container"> <a href="https.//tiendaclaro.pe" title="Tienda Claro"><img src="icons/LogoClaro.png" alt="Claro" height="50" id="logo"></a> </div> </center> <div id="parte2" class="container"> <a href="Web Claro.html" title="Inicio" id="reinicio">Inicio</a> <a href="equipos-samsung.html" title="Samsung" target="_blank" id="resamsung">Samsung</a> </div> <div id="parte3"> Aqui iran el equipo y sus caracteristicas </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.