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