홈>
다음과 같이 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
관련 질문
- html : 링크를 클릭 할 수 없습니다.
- javascript : if 조건에 따라 이벤트 색상을 변경해야합니다.
- html : 부트 스트랩에서 드롭 다운 양식을 어떻게 만듭니 까?
- html : 사용자 정의 SVG에 대한 커서 변경이 작동하지 않습니다.
- html 및 css를 사용하여 그리드보기에서 별 등급을 추가하는 방법은 무엇입니까?
- html : 버튼으로 같은 줄에 텍스트 입력
- html : 모바일 메뉴 문제
- html : 부모에 최대 높이와 오버플로 스크롤이있을 때 Textarea가 늘어나지 않습니다.
- html : CSS를 사용하여 선형 그라디언트 애니메이션
- JavaScript를 통해 콘텐츠가 추가 된 Div의 너비는 0입니다.
이것이 당신이 원하는 것입니까?
#test_image:after
에 새로운 CSS 규칙을 추가했습니다.transform
를 사용할 수 없습니다. 이 경우상속 된 배경 이미지도 div와 함께이동하기 때문입니다.비 주석 해제 변환을 시도하고 devtools에서 번역 값 변경