CSS와 HTML 전환

Question

웹 사이트는 사이트 오른쪽 상단에 일련의 단어 옆에 이미지 (logo.png)가 있습니다.

마우스가 로고와 일련의 단어 위에 맴돌면 단어가 회전하여 흰색이됩니다.

그러나 단어의 순서를 기본값보다 적은 단어로 변경하면 로고의 크기가 줄어 듭니다.

CSS3 및 HTML5 파일을 피어싱했지만이 문제를 해결하지 못했습니다.

.logo a{ 
text-decoration:none; 
} 
.logo .link { 
    outline: none; 
    text-decoration: none; 
    position: relative; 
    font-size: 8em; 
    line-height: 1; 
    color: #fff; 
    display: inline-block; 
} 
    .logo .link--yaku { 
     color: #fff; 
     font-weight: 600; 
     font-size: 38px; 
     overflow: hidden; 
     padding: 12px 0 12px 50px; 
     background: url(../images/logo.png) no-repeat 0px 18px; 
     background-size: 15% !important; 
    } 
    .logo .link--yaku::before { 
     content: ''; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
     left: 0; 
     -webkit-transform: translate3d(-101%,0,0); 
     transform: translate3d(-101%,0,0); 
     -webkit-transition: -webkit-transform 0.5s; 
     transition: transform 0.5s; 
    } 
    .logo .link--yaku:hover::before { 
     -webkit-transform: translate3d(0,0,0); 
     transform: translate3d(0,0,0); 
    } 
    .logo .link--yaku span { 
     display: inline-block; 
     position: relative; 
     -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg); 
     transform: perspective(1000px) rotate3d(0,1,0,0deg); 
     -webkit-transition: -webkit-transform 0.5s, color 0.5s; 
     transition: transform 0.5s, color 0.5s; 
    } 
    .logo .link--yaku:hover span { 
     color: #fff; 
     -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg); 
     transform: perspective(1000px) rotate3d(0,1,0,360deg); 
    } 
    .logo .link--yaku span:nth-child(4), 
    .logo .link--yaku:hover span:first-child { 
     -webkit-transition-delay: 0s; 
     transition-delay: 0s; 
    } 
    .logo .link--yaku span:nth-child(3), 
    .logo .link--yaku:hover span:nth-child(2) { 
     -webkit-transition-delay: 0.1s; 
     transition-delay: 0.1s; 
    } 
    .logo .link--yaku span:nth-child(2), 
    .logo .link--yaku:hover span:nth-child(3) { 
     -webkit-transition-delay: 0.2s; 
     transition-delay: 0.2s; 
    } 

    .logo .link--yaku span:first-child, 
    .logo .link--yaku:hover span:nth-child(4) { 
     -webkit-transition-delay: 0.3s; 
     transition-delay: 0.3s; 
    } 

Answer 1

당신은 배경 이미지로 로고를 사용하고 15 %로 그것의 크기를 설정하고 :

<div class="navbar-header logo"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <h1> 
           <a class="navbar-brand link link--yaku" href="index.html"><span>C</span><span>O</span><span>N</span><span>S</span><span>O</span><span>R</span><span>T</span><span>I</span><span>U</span><span>M</span></a> 
          </h1> 

         </div> 

이것은 CSS3 코드는 다음과 같습니다

이

은 HTML입니다 요소 가로 폭 ( background-size은 항상 사용 된 background-img의 너비와 관련이없는 요소와 관련이 있습니다). 세로 크기는 자동으로 설정되며 ( background-size: 15%은 background-size: 15% auto과 동일 함) 요소의 너비에 따라 조정됩니다.

따라서 요소의 너비를 줄이면 배경 이미지의 크기 (가로 및 세로)가 조정됩니다.

로고를 배경 이미지로 사용하는 요소를 고정 너비로 ​​설정하면 배경 이미지의 크기가 조정되지 않습니다. 예를 들어이를 달성 할 수 있습니다. 에 의해

.logo .link--yaku { 
    display: inline-block; //it's currently an inline element and would otherwise ignore the width property 
    width: 316px; 
}