Fatal编程技术网
  • html/
  • Html 如何使用CSS在Rails应用程序上设置背景图像

Html 如何使用CSS在Rails应用程序上设置背景图像

html css ruby-on-rails ruby-on-rails-4

Html 如何使用CSS在Rails应用程序上设置背景图像,html,css,ruby-on-rails,ruby-on-rails-4,Html,Css,Ruby On Rails,Ruby On Rails 4,我正在构建一个rails应用程序，并尝试为欢迎页面设置背景图像。由于某种原因，图像不会显示，我不知道为什么。我已经看了很多问题，但我仍然无法解决 这是我的最新代码- welcome.css.scss body { background: url('/assets/mamaknowscollage.jpg'); } 我也尝试过（在众多其他变体中）- 这是html（这里的图像标签用于标识） welcome.html.erb- <header> </header> &

我正在构建一个rails应用程序，并尝试为欢迎页面设置背景图像。由于某种原因，图像不会显示，我不知道为什么。我已经看了很多问题，但我仍然无法解决

这是我的最新代码-

welcome.css.scss

body {
  background: url('/assets/mamaknowscollage.jpg');
}
我也尝试过（在众多其他变体中）-

这是html（这里的图像标签用于标识）

welcome.html.erb-

<header>


</header>
<body>


            <image><%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %></image>

</body>
我保留了url路径，但我也尝试过在没有资源的情况下使用它，但它仍然不起作用

知道我做错了什么吗

您可以将welcome.css.scss文件重命名为welcome.scss.erb并试用。 （SCS将起作用！）

将路径写为

background: url('<%= asset_path 'mamaknowscollage.jpg' %>');

background:url（“”）；
图像文件应放置在资源/图像中

来源：

您可以将welcome.css.scss文件重命名为welcome.scss.erb并试用。 （SCS将起作用！）

将路径写为

background: url('<%= asset_path 'mamaknowscollage.jpg' %>');

background:url（“”）；
图像文件应放置在资源/图像中

来源：

如果文件位于
资产/images
文件夹中，则按如下操作

 background: image-url('mamaknowscollage.jpg');
如果文件位于
assets/images
文件夹中，则按如下操作

 background: image-url('mamaknowscollage.jpg');
  • 首先，将文件重命名为
    welcome.scss.erb
  • 然后确保将您的
    welcome.scss.erb
    包含到
    application.css.erb
    中
只需添加一行：

*= require welcome
  • 然后，您应该检查它是否有效-例如，尝试将背景设置为蓝色
  • 最后，找出正确的图像路径应该很简单
      • 首先，将文件重命名为
        welcome.scss.erb
      • 然后确保将您的
        welcome.scss.erb
        包含到
        application.css.erb
        中
      只需添加一行：

      *= require welcome
      • 然后，您应该检查它是否有效-例如，尝试将背景设置为蓝色
      • 最后，找出正确的图像路径应该很简单
      使用
      scss
      ，您可以按照以下步骤进行操作：

      body {
 background:url(asset-path('mamaknowscollage.jpg')) 0px 0px;
}

      mamaknowscollage.jpg
      文件应放在
      assets/images

      关于这个问题，我认为你应该删除
      image
      tag

      <body>
  <%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %>
</body>
      使用
      scss
      ，您可以按如下方式执行：

      body {
 background:url(asset-path('mamaknowscollage.jpg')) 0px 0px;
}

      mamaknowscollage.jpg
      文件应放在
      assets/images

      关于这个问题，我认为你应该删除
      image
      tag

      <body>
  <%= link_to image_tag('MamaKnowsLogo.jpg'), root_path, id: "logo" %>
</body>
      首先重命名css文件 
      welcome.css
      到
      welcome.scss
      和 
      application.css
      到
      application.scss

      在
      application.scss
      文件中添加@import“welcome”

      如果您的图像位于
      app/assets/images
      文件夹中，请使用：

      background: image-url("my_image.jpg");

      background: image-url("SomeFolder/my_image.jpg");
      如果您的图像位于
      app/assets/images/SomeFolder
      文件夹中，请使用：

      background: image-url("my_image.jpg");

      background: image-url("SomeFolder/my_image.jpg");
      首先重命名你的css文件 
      welcome.css
      到
      welcome.scss
      和 
      application.css
      到
      application.scss

      在
      application.scss
      文件中添加@import“welcome”

      如果您的图像位于
      app/assets/images
      文件夹中，请使用：

      background: image-url("my_image.jpg");

      background: image-url("SomeFolder/my_image.jpg");
      如果您的图像位于
      app/assets/images/SomeFolder
      文件夹中，请使用：

      background: image-url("my_image.jpg");

      background: image-url("SomeFolder/my_image.jpg");
      经过多次修改，我通过在welcome.html.erb文件的body元素中添加一个“class”并应用适当的css代码解决了这个问题-

       body.background {
     background: url('mamaknowscollage.jpg');

  }
      HTML-

       <body class="background">

     <div class="welcome">



         <%= image_tag('MamaKnowsLogo.jpg') %>

     </div>

 </body>
      感谢所有做出贡献的人。

      经过大量修改，我通过在welcome.html.erb文件的body元素中添加一个“class”并应用适当的css代码解决了这个问题-

       body.background {
     background: url('mamaknowscollage.jpg');

  }

      body {
  background-image: url(mamaknowscollage.jpg);
}
      HTML-

       <body class="background">

     <div class="welcome">



         <%= image_tag('MamaKnowsLogo.jpg') %>

     </div>

 </body>
      感谢所有做出贡献的人

      body {
  background-image: url(mamaknowscollage.jpg);
}
      为我工作

      为我工作

      您的图像位于何处，即路径示例：
      app/assets/images/mamaknowscollage.jpg
      应该工作请告诉我您的图像位置
      path
      是的，它位于您上面描述的路径中。您是否可以为
      欢迎
      页面添加
      html
      代码您的图像位于何处的可能重复项，例如，路径示例：
      app/assets/images/mamaknowscollage.jpg
      应该可以。请告诉我您的图像位置
      path
      是的，它在您上面描述的路径中。您可以为
      欢迎
      页面添加
      html
      代码吗？我需要文件的可能副本是.scss，因为我正在使用bootstrap.ok！只需将您的SCS重命名为.erb，即如果welcome.css.scss-将其重命名为welcome.css.scss.erb，您的SCS将正常工作！但这难道不意味着我的所有样式文件都需要重命名才能用于样式化目的吗？例如，我在页面上有一个正在工作的徽标，为什么我可以设置一个元素的样式，但不能添加另一个？还要检查图像的拼写是否正确（区分大小写）以及扩展名..我想你已经在html.erb中将徽标写为img标记而不是scss对吗？我需要文件为.scss，因为我正在使用bootstrap.ok！只需将您的SCS重命名为.erb，即如果welcome.css.scss-将其重命名为welcome.css.scss.erb，您的SCS将正常工作！但这难道不意味着我的所有样式文件都需要重命名才能用于样式化目的吗？例如，我在页面上有一个正在工作的徽标，为什么我可以设置一个元素的样式，但不能添加另一个？还要检查图像的拼写是否正确（区分大小写）以及扩展名..我猜你在html.erb中将徽标写为img标记不是scss对吗？我在欢迎页面上有一个可以设置样式的徽标，为什么我可以这样做，但不添加背景图像？我已经在上面添加了我的html，我一定是做错了什么-它可能非常明显，但我看不到它。是的，我已经修改了它，并将其放置在旁边。一切正常。然后检查一下我在欢迎页面上有一个徽标