在scss文件rails中添加图像作为图标?
我对rails的前端(通常是后端)比较陌生,我对向css文件中添加图像而不是我的show.haml文件非常迷茫。 以下是我所拥有的: scss文件:在scss文件rails中添加图像作为图标?,css,ruby-on-rails,Css,Ruby On Rails,我对rails的前端(通常是后端)比较陌生,我对向css文件中添加图像而不是我的show.haml文件非常迷茫。 以下是我所拥有的: scss文件: @charset "utf-8"; @import "common"; @import "base_grid"; // teacherSearchForm design ================================ #teacherSearchForm{ position: relative; @include siz
@charset "utf-8";
@import "common";
@import "base_grid";
// teacherSearchForm design ================================
#teacherSearchForm{
position: relative;
@include size(100%, 70px);
margin: 10px 0; padding: 10px 0;
}
.search_option_flipIcon{
@include size(50px, 50px);
background: #ddd;
float: left;
line-height: 50px;
text-align: center;
&.prev{border-radius: 0 25px 25px 0;}
&.next{border-radius: 25px 0 0 25px;}
}
.search_option_flipIcon:before{
color: #888;
font-family: dripicons;
font-size: 20px;
}
.tutorial:before{
content: "\e00d";
}
.zip:before{
@include size(50px,50px);
display: block;
background-image: url('assets/images/users/rsz_zipcode.jpg');
background-position: 0 0;
background-repeat: no-repeat;
line-height: 50px;
text-align: center;
&.prev{border-radius: 0 25px 25px 0;}
&.next{border-radius: 25px 0 0 25px;}
}
show.haml文件:
#teacherSearchForm
.search_option_flipIcon.prev.tutorial
#navigation_menu
#navigation_menu_window
.search_option_item.fourN#tutorial
.dripicons.tutorial.oneN
.search_option_item_title.tenN 使い方ガイドを見る
.search_option_item.fourN#zip
.dripicons.zip.oneN
.search_option_item_title.tenN
.fiveN= text_field_tag 'zip1', '', :max => '999', :placeholder => '012', :id => 'addr_zip1', :class => 'zip_input'
.twoN -
.fiveN= text_field_tag 'zip2', '', :max => '9999', :placeholder => '3456', :id => 'addr_zip2', :class => 'zip_input'
.search_option_item.fourN#option
.dripicons.option.oneN
.search_option_item_title.tenN 検索の条件を追加する
.search_option_flipIcon.next.option
#search_form
= form_tag user_searches_path, :remote => true, :authenticity_token => true, :id => 'search_form' do
= hidden_field_tag "mode", 't'
= hidden_field_tag "zip1", '', :id => "hidden_zip1"
= hidden_field_tag "zip2", '', :id => "hidden_zip2"
#search_form_inner.full
= render :partial => "user_searches/days"
= render :partial => "user_searches/subjects"
= render :partial => "user_searches/sex"
%input.sixN.btn{:type => "button", :value => "キャンセル"}
= submit_tag "検索", :class => 'sixN btn'
当前结果:如图所示,高亮显示的部分没有图像。
您必须使用rails助手。在这种情况下
background-image: url(image_path('users/rsz_zipcode.jpg'));
您可以在scss文件中使用“背景图像:资产url('assets/images/users/rsz_zipcode.jpg');”资产url返回url('预编译映像路径')