问题：

Question

我有以下情况。

我需要自定义网站上的所有链接以获得橙色背景。

.have-all-links-orange a{
    background-color: #F59522;
}

然而，当我这样做时，A中的所有图像都获得相同的背景，我试过这个，但没有做到这一点

.have-all-links-orange a img{
    background-color: transparent;
}

关于如何解决这个问题的任何想法？

更新

Fiddle

Answer 1

问题：

因为img默认情况下是内联元素，因此会创建一个间隙，默认情况下为vertical-align:baseline。

解决方案

在display:block

img

＆＃13;

.have-all-links-orange a {
  background-color: #F59522;
}

.have-all-links-orange a img {
  background-color: transparent;
  display: block
}

＆＃13;

<div class="have-all-links-orange">
  <a href="www.google.com">
    <img src="https://www.google.com.pe/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <br />
    <a href="http://www.google.com">click here<a>
<div>

＆＃13;

Answer 2

使图像成为块元素。

.have-all-links-orange a img {
    display: block;
     background-color: transparent;/**You don't need this**/
}

Answer 3

你可以这样做

.have-all-links-orange a img {
  background-color: transparent;
  display: block;
}

Here is a forked fiddle

How to get anchor tag on background image of div?

Answer 4

嗯...也许是这样的？你确实说过“所有链接都有oragne背景”。

a {
 background-color: #F59522;
}

Answer 5

如果你必须将你的图像放在不同的显示器中，你总是可以使用jquery去除颜色：

https://jsfiddle.net/616d530s/2/

$('.have-all-links-orange a img').closest('a').css('background', 'transparent');

在css上覆盖父样式

更新

5 个答案:

问题：

解决方案