CSS3 필터 블러로 정의 된 가장자리

이 코드로 일부 이미지를 흐리게합니다.

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

하지만 이미지의 가장자리도 흐려집니다. 가장자리를 정의하면서 이미지를 흐리게 할 수 있습니까? 삽입 된 블러 같은 거요?

당신은에 넣어 수 <div>로 overflow: hidden;및 설정 <img>에 margin: -5px -10px -10px -5px;.

데모:

산출

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​

나는이 일을 할 수 있었다

transform: scale(1.03);

이미지에 적용된 속성입니다. 어떤 이유로 Chrome에서 상대적으로 배치 된 상위 요소가 있으면 제공된 다른 솔루션이 작동하지 않습니다.

http://jsfiddle.net/ud5ya7jt/ 확인

이렇게하면 이미지가 3 % 약간 확대되고 가장자리가 잘려서 흐릿한 이미지에 문제가되지 않습니다. 고해상도 이미지를 배경으로 사용했기 때문에 제 경우에는 잘 작동했습니다. 행운을 빕니다!

내가 사용 -webkit-transform: translate3d(0, 0, 0);과 함께 overflow:hidden;.

DOM :

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

CSS :

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

데모 : http://jsfiddle.net/DA5L4/18/

이 기술은 Chrome34 및 iOS7.1에서 작동합니다.

최신 정보

http://jsfiddle.net/DA5L4/50/

최신 버전의 Chrome을 사용하는 경우 -webkit-transform: translate3d(0, 0, 0);해킹 을 사용할 필요가 없습니다 . 그러나 Safari (webkit)에서는 작동하지 않습니다.

전체 비디오를 보관할 수도 있으며, 무언가를 잘라낼 필요가 없습니다.
흰색으로 흐린 가장자리 위에 삽입 된 그림자를 오버레이 할 수 있습니다.

이것도 정말 멋져 보입니다 :)

다음 코드를 동영상의 부모에게 붙여 넣으세요.

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}

IMG를 position : absolute 로 만들 수있는 많은 상황에서 클립 을 사용 하여 흐린 가장자리를 숨길 수 있으며 외부 DIV는 필요하지 않습니다.

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}

오늘 직접이 문제를 해결 한 후, (현재) 주요 브라우저에서 작동하는 솔루션을 제시하고 싶습니다. 이 페이지의 다른 답변 중 일부는 한 번 작동했지만 브라우저이든 OS이든 최근 업데이트로 인해 이러한 답변의 대부분 / 모두가 무효화되었습니다.

핵심은 이미지를 컨테이너에 배치하고 변형 : 그 컨테이너를 overflow : hidden 부모에서 확장하는 것입니다. 그런 다음 컨테이너 자체가 아닌 컨테이너 내부의 img에 블러가 적용됩니다.

작업 바이올린 : https://jsfiddle.net/x2c6txk2/

HTML

<div class="container">
    <div class="img-holder">
        <img src="https://unsplash.it/500/300/?random">
    </div>
</div>

CSS

.container {
    width    : 90%;
    height   : 400px;
    margin   : 50px 5%;
    overflow : hidden;
    position : relative;
}

.img-holder {
    position  : absolute;
    left      : 0;
    top       : 0;
    bottom    : 0;
    right     : 0;
    transform : scale(1.2, 1.2);
}

.img-holder img {
    width          : 100%;
    height         : 100%;
    -webkit-filter : blur(15px);
    -moz-filter    : blur(15px);
    filter         : blur(15px);
}

허용되는 대답에 대한 힌트는 절대 위치를 사용하는 경우 음수 여백이 작동하지 않지만 여전히 위쪽, 아래쪽, 왼쪽 및 오른쪽을 음수 값으로 설정하고 상위 요소 오버플로를 숨길 수 있습니다.

이미지 크기를 모르는 경우 절대 이미지 위치에 클립을 추가하는 방법에 대한 답변은 문제가 있습니다.

와 함께 이미지를 삽입 position: relative;하고overflow: hidden;

HTML

<div><img src="#"></div>

CSS

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

이것은 동적 div와 같은 가변 크기 요소에서도 작동합니다.

이미지를 잘라 내고 흐림 효과를 0 픽셀로 설정하는 래퍼 요소를 적용하여 이미지의 가장자리가 겹치지 않도록 할 수 있습니다. 다음과 같은 모습입니다.

HTML

<div id="wrapper">
  <div id="image"></div>
</div>

CSS

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}

가장 간단한 방법은 이미지가 포함 된 div에 투명한 테두리를 추가하고 다음과 같이 표시 속성을 인라인 블록으로 설정하는 것입니다.

CSS :

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

HTML

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

다음은 동일한 코드 펜입니다. https://codepen.io/arnavozil/pen/ExPYKNZ

다른 요소에 테두리를 추가 할 수 있습니다.

DOM :

<div><img src="#" /></div>

CSS :

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}

제 경우에는 래퍼를 추가 할 필요가 없다는 것을 알았습니다.

방금 추가했습니다.

margin: -1px;

또는

margin: 1px; // any non-zero margin
overflow: hidden;

내 흐릿한 요소가 절대적으로 위치했습니다.

다음은 이미지의 100 %를 유지하고 자르기가 필요없는 솔루션입니다.

기본적으로 이미지를 3x3 격자로 미러링 한 다음 모든 것을 흐리게 한 다음 중앙 이미지를 확대하여 애프터 이펙트를 흐리게 할 때 반복 가장자리처럼 효과적으로 생성합니다 .css3에 반복 가장자리가 내장되어 있지 않다는 것이 조금 이상합니다.

방법 / 코드 링크 : 가장자리를 자르거나 페이드하지 않고 CSS3를 사용하여 이미지를 흐리게하는 방법은 무엇입니까?

배경 이미지를 사용하는 경우 가장 좋은 방법은 다음과 같습니다.

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;