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

Question 1

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

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

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

Question 2

당신은에 넣어 수 <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>

Question 3

나는이 일을 할 수 있었다

transform: scale(1.03);

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

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

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

Question 4

내가 사용 -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)에서는 작동하지 않습니다.

Question 5

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

이것도 정말 멋져 보입니다 🙂

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

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

Question 6

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);
}

Question 7

오늘 직접이 문제를 해결 한 후, (현재) 주요 브라우저에서 작동하는 솔루션을 제시하고 싶습니다. 이 페이지의 다른 답변 중 일부는 한 번 작동했지만 브라우저이든 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);
}

Question 8

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

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