在边框半径图像背景上添加边框渗透 [英] Adding border on border radius image background bleed through

问题描述

我在带有蓝色背景的图片上添加了一个黑色边框，在这样做时，它会在边框的INSIDE上添加一个非常醒目的背景色轮廓。有没有办法摆脱这一点？我使用的代码很简单：

I'm adding a black border on images with a blue background and while doing so, it appears to add an ever so noticeable background colored outline on the INSIDE of the border when doing so. Is there a way to get rid of this? The code I'm using is simple:

border-radius: 100%;
border: 3px solid rgb(0, 0, 0);

您可以通过向任何图片添加半径来查看背景颜色，例如：

And you can see the background color edging in by adding a radius to any image, as an example:

>

推荐答案

有几种方法可以避免恼人的边界半径背景出血：

There are several ways to avoid that annoying border-radius background bleed:

将< img> 放入包装元素中，包装器，具有与< img> 的边框匹配的背景颜色。这样，图像上发生的任何抗锯齿都会考虑包装器的背景颜色，而不是页面的背景颜色。

Put the <img> in a wrapper element, and add padding to the wrapper, with a background color that matches the <img>'s border. This way, any antialiasing that happens on the image will take into account the background color of the wrapper, rather than the background color of the page.

向< img> 添加与边框颜色匹配的背景颜色。它将使用< img> 的背景颜色代替页面背景颜色来进行抗锯齿。

Add a background color to your <img> that matches the border color. It'll use the <img>'s background color instead of the page background color to do the antialiasing.

不要使用边框。向< img> 添加等于所需边框大小的填充，并在所需的边框颜色中添加背景颜色。

Don't bother with a border. Add padding to your <img> equal to the border size you want, and add a background color in the border color you want. This gets you the same effect with the least amount of code.

这里有一个JSFiddle，其中每个方法： https://jsfiddle.net/4zpL98au/14/

Here's a JSFiddle with each of these methods: https://jsfiddle.net/4zpL98au/14/

这篇关于在边框半径图像背景上添加边框渗透的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！