HTML：如何从图像和文本中删除超链接下划线？

Question

向图像添加一些超链接后，它有下划线，但我找不到删除它的方法。 首先我尝试text-decoration: none; 但我注意到它只适用于文本，所以图像看起来像这个图像

“Claro”图像有我无法删除的下划线。

这是代码：

 * { 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>

我如何设法删除图像的下划线并使其他“Inicio”和“Samsung”选项看起来像普通文本，而不是紫色或蓝色？

Answer 1

你所说的下划线实际上并不是下划线。

您已在 CSS 中添加了这一行

* {
  background-color: #eeeeee;
}

这意味着每个 HTML 标签都会有这个背景。 因此您的图像和父<a>也将具有此背景颜色，并且由于图像具有底部边距，这在父<a>中产生了间隙，并且该间隙用定义的背景颜色填充。

所以你看到的是填充的背景颜色，而不是下划线或边框。

Answer 2

如果您设置背景颜色：#colorname; 在 body 元素选择器之内。

body {
       background-color:#colorname;
     }

这意味着设置背景颜色#colorname; 你的身体。

但是当您将这个 css 属性用于通用选择器时。

* {
    background-color:#colorname;
  }

这意味着设置 web 页面的所有元素的背景颜色#colorname。

我希望它对你有帮助。

     * {}
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;
}

Answer 3

尝试添加背景颜色：#eeeeee; 属性到 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>

HTML：如何从图像和文本中删除超链接下划线？

问题描述

3 个解决方案

解决方案1
4 2022-09-26 05:31:58

解决方案2
0 2022-09-26 16:27:29

解决方案3
-1 2022-09-26 05:46:54

HTML：如何从图像和文本中删除超链接下划线？

问题描述

3 个解决方案

解决方案1 4 2022-09-26 05:31:58

解决方案2 0 2022-09-26 16:27:29

解决方案3 -1 2022-09-26 05:46:54

解决方案1
4 2022-09-26 05:31:58

解决方案2
0 2022-09-26 16:27:29

解决方案3
-1 2022-09-26 05:46:54