>

다음과 같이 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>


  • 답변 # 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>
    
    

  • 이전 numpy - 파이썬에서 결합 미분 방정식 시스템을 푸는 방법은 무엇입니까?
  • 다음 java - SpannableStringBuilder append () NullPointerException