如何隐藏边框下方的背景答案

【问题标题】：How to hide the background underneath the border如何隐藏边框下方的背景
【发布时间】：2011-09-19 15:16:56
【问题描述】：

我需要修改一个网站，使所有链接的可点击区域对于移动设备来说更大。我给所有链接一个透明的border 和一个相同大小的负margin，以免影响文本流。现在这就像一个魅力。但不适用于有背景的元素。背景扩展到透明边框。这是在所有浏览器之间保持一致的行为接缝。

这是为什么？我一直认为边框在元素之外。我怎么能解决这个问题。（我需要一个不需要修改 HTML 的解决方案）。

【问题讨论】：

标签： css

【解决方案1】：

background-clip: padding-box; 怎么样？

【讨论】：

【解决方案2】：

我认为，如果边框在元素之外，那么您后面的行为（点击边框的行为就像点击元素内部一样）也不起作用

如果背景图像不重复，您可以将背景位置 x 位置设置为与边框宽度相同的量。否则，你也可以尝试将border-color设置为与元素后面的颜色相同，但如果是图像，祝你好运

【讨论】：

【解决方案3】：

CSS background 填充 border 的区域，border-color 覆盖在上面。

因为你有一个透明的border，所以它后面会显示background-color。

对于纯 HTML/CSS，我不确定是否有解决方法。

这个 jsFiddle 演示了这一点：

【讨论】：

ok，背景位置没有变化，但显示了更多的背景：jsfiddle.net/DytDA :/
是的，那是因为红色没有覆盖它。它在第一个锚的红色后面。抱歉，我不确定您是否可以仅使用 HTML/CSS 实现您的目标。也许有 javascript/jquery 解决方案

【解决方案4】：

试试这个：

<a href="#"><span style="background: red">link</span></a> test test test <br/>
test test test

注意：span 表示具有另一种样式（其他 CSS 值）的内联元素。其他将强制一个新块的 div。

【讨论】：