<p>저는 이미지 위로 마우스를 가져가면 축소되어 div의 배경을 보기 위해 너무 많이 축소하지 않고도 전체 이미지를 볼 수 있는 웹사이트를 개발 중입니다. </p> <p>내 HTML은 다음과 같습니다.</p> <pre class="brush:html;toolbar:false;"><div id="래퍼"> <div id="imgDiv"> <div id="transitionDiv" style="배경 이미지: url("../resources/models/HA-SJX.JPG");"></div> </div> <p id="title">MALEV Cessna c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)>다운로드</a> </div> </pre> <p>나만의 CSS:</p> <pre class="brush:css;toolbar:false;">:루트 { --img-크기: 350px; --버튼 여백: 20px; --진한 파란색: #070b21; --파란색: #10184a; --밝은 파란색: #00d1ff; } div#래퍼 { 위치: 상대; 여백: 자동; 여백 하단: 100px; 배경색: var(--dark-blue); 너비: var(--img-size); } div#imgDiv { 위치: 상대; 텍스트 정렬: 중앙; 색상: 빨간색; 패딩: 0; 여백: 0; 배경색: var(--dark-blue); 오버플로: 숨김; 높이: var(--img-size); } div#imgDiv div#transitionDiv { 배경 위치-x: 50%; 높이: 100%; 너비: 100%; 배경 크기: auto var(--img-size); background-repeat: 반복하지 않음; -webkit-transition: 배경 크기 1500ms 용이성; -moz-transition: 배경 크기 1500 용이성; -o-transition: 배경 크기 1500 용이성; -ms-transition: 배경 크기 1500ms 용이성; 전환: 배경 크기 1500ms 용이성; } div#imgDiv:호버 div#transitionDiv { 배경 위치 Y: 50%; 배경 크기: var(--img-size) auto; } p#제목 { 오버플로: 숨김; 높이: 38px; 여백: 30px; 디스플레이: -webkit-box; -웹킷-라인-클램프: 2; -webkit-box-orient: 수직; } div#designs div a { 디스플레이: 블록; 텍스트 정렬: 중앙; 텍스트 장식: 없음; 배경색: var(--light-blue); 색상: 흰색; 글꼴 크기: 40px; 글꼴 모음: "Montserrat", sans-serif; 여백: var(--button-margin); 패딩: 0px; 너비: calc(100% - 2 * var(--button-margin)); 테두리 반경: 15px; 전환: 0.5초; } div#designs div a#no-link { 배경색: 회색; } div#designs div a:hover { 배경색: dodgerblue; /* 지금은 임의의 색상을 사용합니다 */ } div#디자인 div a:활성 { 배경색: 파란색; /* 지금은 임의의 색상을 사용합니다 */ } </pre> <p>저는 이 방법을 사용하지 않습니다. </p> <p>我还尝试更改 div，使其在 div 内有一个图image标签，但这也不起작품용。</p>