2016-10-08 18 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

関連する問題