以下のように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>
マークアップが役立ちます。 – yckart
質問は明らかではありませんが、あなたのマークアップ(html)を追加することをお勧めします – M98