How to remove white border from blur background image

Question

How to remove the white blur border from the background image.

CSS, i tried adding marg

Answer 1

Here's a function I settled on based on @Prime 's answer.

In order for it to work the image must be positioned inside a

having the width and height of the image (explicitly set).

    function addBlur(style, radius) {
      return {
        ...style,
        // https://caniuse.com/#feat=css-filters
        filter: `blur(${radius}px)`,
        // Works around the white edges bug.
        // https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image
        width: `calc(100% + ${2 * radius}px)`,
        height: `calc(100% + ${2 * radius}px)`,
        marginLeft: `-${radius}px`,
        marginTop: `-${radius}px`
      }
    }

0 讨论(0)

查看其它9个回答

发布评论:

提交评论

---

•  加载中...