2016-10-08 4 views
-2

다음과 같이 CSS 파일을 받았습니다. 나는 일반적으로 HTML에서 앵커를 참조하고 CSS를 사용하여 형식을 지정하지만 여기서는 파일이 CSS 파일을 사용하여 배치됩니다.이미지를 CSS 파일로 크기 조정

나는 로고 파일을 우리 로고로 변경할 수 있었지만 지금은 로고의 크기를 너무 크게 변경해야합니다.

CSS

#header { 
    display: block; 
    background: #446e9b; 
    color: white; 
} 
#header::after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#header h1 { 
    margin: 0; 
    font-size: 1.5em; 
    color: white; 
    font-weight: 400; 
    padding-top: 0.5em; 
    padding-bottom: 0.5em; 
    position: relative; 
    padding-left: 3.8em; 
    z-index: 0; 
    -webkit-animation: fadeIn 1s; 
    -moz-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 
#header .home { 
    display: block; 
    width: 3em; 
    height: 100%; 
    border-right: 1px solid #395c82; 
    border-left: 1px solid #395c82; 
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15), -1px 0 0 rgba(255, 255, 255, 0.15); 
    position: absolute; 
    top: 0; 
    left: 1px; 
    padding: 0.2em; 
    text-align: center; 
} 
#header .home:before { 
/* content: url(../images/logo.svg); */ 
    content: url(/images/logo.png); 
} 
#header .home:hover, #header .home:active { 
    background: rgba(71, 77, 87, 0.5); 
} 
#header #quick-search { 
    position: relative; 
    top: 0.65em; 
    z-index: 5; 
    -webkit-animation: fadeIn 1s; 
    -moz-animation: fadeIn 1s; 
    animation: fadeIn 1s; 
} 
#header #quick-search .icon-search:before { 
    z-index: 5; 
    position: absolute; 
    left: 2.4em; 
    top: 0.2em; 
    color: #474d57; 
} 
#header #quick-search #q { 
    margin-left: 1em; 
    padding-left: 2em !important; 
    border-color: rgba(71, 77, 87, 0.5); 
    padding: 0.4em; 
    width: 10em; 
    background: rgba(71, 77, 87, 0.3); 
    box-shadow: none !important; 
    position: relative; 
    z-index: 0; 
    color: rgba(255, 255, 255, 0.8); 
} 
#header #quick-search #q:active, #header #quick-search #q:focus { 
    color: #333333; 
    background: white; 
    width: 15em; 
} 
#header a, #header .icon-add.checklist-new-only, #header a:hover, #header .icon-add.checklist-new-only:hover, #header a:active, #header .icon-add.checklist-new-only:active, #header a:focus, #header .icon-add.checklist-new-only:focus { 
    color: white; 
} 
#header .select2-container { 
    margin-left: 1em; 
} 
#header .select2-container .select2-chosen { 
    font-size: 0.9em; 
    color: rgba(255, 255, 255, 0.8); 
} 
#header .select2-container .select2-choice { 
    background: rgba(71, 77, 87, 0.3); 
    border-color: rgba(71, 77, 87, 0.5); 
    box-shadow: none !important; 
    height: 2.2em; 
} 
#header .select2-container .select2-arrow { 
    border-color: rgba(71, 77, 87, 0.5); 
} 

HTML

<div id="header"> 

    <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a> 

    <% if User.current.logged? || !Setting.login_required? %> 
    <div id="quick-search"> 
     <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get) do %> 
     <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %> 
     <label for='q'> 
      <%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project}, :accesskey => accesskey(:search) %>: 
     </label> 
     <%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search) %> 
     <% end %> 
     <%= render_project_jump_box %> 
    </div> 
    <% end %> 

    <h1><%= page_header_title %></h1> 
    <% if display_main_menu?(@project) %> 
    <div id="main-menu" class="tabs"> 
     <%= render_main_menu(@project) %> 
     <div class="tabs-buttons" style="display:none;"> 
      <button class="tab-left" onclick="moveTabLeft(this); return false;"></button> 
      <button class="tab-right" onclick="moveTabRight(this); return false;"></button> 
     </div> 
    </div> 
    <% end %> 
</div> 
+0

일부 마크 업이 도움이됩니다. – yckart

+0

질문이 분명하지 않다. 마크 업 (html)을 추가하는 것이 더 좋다. – M98

답변

0

나는이 문제의 코드입니다 가정 :

#header .home:before { 
/*content: url(../images/logo.svg);*/ 
    content: url(/images/logo.png); 
} 

, 당신은 할 수이 크기를 조정하려면 :

#header .home:before { 
    content: ''; 

    background-image: url('/images/logo.png'); 
    background-size: ...; 
} 

제쳐두고, 귀하의 질문은 분명하지 않습니다.

+0

이전에 너비와 높이를 사용해 보았지만 제대로 작동하지 않았다. – Dercni

+0

그런 다음'background-image'를 사용하십시오. – fzzle

+0

혼란스러워. width를 사용하여 제안한 것처럼 작동하지 않는 이유는 무엇입니까? – Dercni