홈>2020-02-26 14:00

html - CSS 젖빛 유리가 잘못 배치되었습니다

다음과 같이 CSS로 서리로 덥은 유리 효과를 얻으려고합니다. https://codepen.io/GreggOD/full/xLbboZ

그러나 나는 전체 이미지를 보여 주지만 더 작은 크기를 보여주기 때문에 무언가를 놓치고 있다고 생각합니다.

background-size: cover; background-attachment: fixed; 를 설정했습니다 하지만 문제가 해결되지는 않습니다

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}
#test_image {
  background: inherit;
  position: relative;
  left: 50%;
  top: 50%;
  overflow: hidden;
  height: 200px;
  width: 400px;
  transform: translate(-50%, -50%);
}
#blur {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  filter: blur(5px);
}

<div id='second_wrapper'>
  <div id='test_image'>
    <div id='blur'>
    </div>
  </div>
</div>

htmlcssblur

답변 # 1

이것이 당신이 원하는 것입니까? #test_image:after 에 새로운 CSS 규칙을 추가했습니다.

 background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/

transform 를 사용할 수 없습니다. 이 경우상속 된 배경 이미지도 div와 함께이동하기 때문입니다.

비 주석 해제 변환을 시도하고 devtools에서 번역 값 변경

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}
#test_image {
  background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/
}
#test_image:after {
  content: "";
  background: inherit;
  filter: blur(10px);
  width: 400px;
  height: 200px;
  display: block;
}

<div id='second_wrapper'>
  <div id='test_image'>
    <div id=''>
      T
    </div>
  </div>
</div>

Python2.net

html - CSS 젖빛 유리가 잘못 배치되었습니다

관련 자료