问与答 如何在CSS的Rails中设置背景图片?

dan · 2020-03-19 23:07:19 · 热度: 40

我正在使用Rails 3.2,并且我必须为其中一个页面设置背景,并且我尝试了许多方法,但没有任何进展,因此寻求一些好的帮助。 我试过了

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

background: url("public/background.jpg");

background-image:url('/assets/images/background.jpg')

没有任何效果。 请帮我。

猜你喜欢:
共收到 12 条回复
darnell #1 · 2020-03-19 23:07:19

在您的CSS中:

background-image: url(background.jpg);

要么

background-image: url(/assets/background.jpg);

environments/production.rb中:

# Disable Rails's static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true
nigel #2 · 2020-03-19 23:07:21

对于Sass(scss),此代码适用于以下图像路径

app / assets / images / pictureTitle.png

body { 
  background-image: image-url('pictureTitle.png'); 
}

您可能还需要重新启动Rails服务器。

kristopher #3 · 2020-03-19 23:07:22

如果图像在公共目录中,例如public / bg.jpg

background-image: url('/bg.jpg')

如果您在app / assets / images / bg.jpg中有图片

 background-image: url('/assets/bg.jpg')
rogelio #4 · 2020-03-19 23:07:23

如果您使用的是sass(scss),请使用image-url函数:

body {
  background-image: image-url('texture.png'); // link to /assets/images/texture.png
}
surat #5 · 2020-03-19 23:07:24

我遵循了上面的建议(谢谢!)-以防万一它对其他人也不起作用-此解决方案对我有用:

.myClass {
   background: image-url('myPicture.png');
}

因此,我必须在scss中使用“ background”代替“ background-image”。

mckenzie #6 · 2020-03-19 23:07:26

这个问题可能比您想象的更加根深蒂固。 它很可能不是许多假定的Rails资产问题,而是html元素之间的“通信错误”。 原因如下:

  1. 首先,通过将背景图像放入height: 100%元素来愚弄您的代码。

    height: 100%
  2. 然后,检查您的开发者工具控制台,以查看图像是否正确加载或找不到404。
  3. 如果给出404,则说明您的CSS语法不正确,请尝试本文中的其他答案,直到不再获得404为止。对我而言,以上示例有效:
  4. 一旦您意识到控制台不再提供404信息,请确认该图像实际上已加载:

    [http:// localhost:3000 / assets / pic-name.jpg]

    • 我知道这可能因人而异,但是请尝试并确保已使用图片的名称。
  5. 如果加载良好,现在您知道了罪魁祸首-height: 100%元素隐藏了某些东西-将图像放在nav中时,它可以工作,而将图像放在另一个元素中时,则不能工作。
  6. 这是诀窍; 在您想要背景图像的height: 100%元素中,我的是nav,插入一些文本或某些行,是的,只是纯文本或其他内容! 我的是:

    height: 100%

  7. a,它奏效了! 尽管它没有显示完整图像,但只是上部。 但是至少我知道它有效。

  8. 而且,如果您添加更多文本,则图像会向下拉伸(显示更多)

希望这对某人有帮助。随之而来的是,我意识到放置背景图像以覆盖height: 100%也不是那么容易,尤其是使用引导程序时。 nav和您的其他元素都必须是相同的parent elementchildren,例如,我的是上面所示的header,并且还必须在您的homepage.html.erb和其他所有页面中渲染导航。 只是在application.html.erb上渲染它

更新资料

好的,这就是我要显示整个背景图像而无需在此处和此处插入文本的操作。 在您拥有CSS的height: 100%中,我只是添加了height属性,如下所示

     body {
background: url('pic-name.jpg') no-repeat center center;
background-size: cover;
height: 600px;}

N.B:使用height: 100%不起作用。

mattie #7 · 2020-03-19 23:07:27

我为此整整挣扎了一天。 最后,我通过在保存背景图像的视图中对css进行编码,使其在开发和生产中都能正常工作:

<head>
    <style>
        #tile {
            background: url(<%= asset_path 'background.jpg' %>);
            background-size: cover;
            }
    </style>        
</head>

然后,在工作表本身上,我创建了一个id = tile的div,如下所示:

<div id=tile>
  <div class=row>
  ...added more stuff
  </div>
</div>

Ruby 2.3.7 Rails 5.2.0

maximus #8 · 2020-03-19 23:07:28

对于这个问题,有很多答案,我认为我会提出解决方案,以解决原始问题,因为他们最初尝试使用ERB帮助程序,其中包括:

遵循Kangkyu上面的链接,我知道可以将.erb文件扩展名添加到我的.css文件中。 Kangkyu绝对是这么做的。

application.css.erb

这使我可以访问辅助方法。

我没有费心找出图像的正确路径,而是使用了:

<%= asset_path "image_name.png" %>

所以我的CSS属性/值对如下所示:

background-image: url(<%= asset_path 'foo.jpg' %>);
bagot #9 · 2020-03-19 23:07:30

试试下面的代码,它肯定会起作用:

.background-style {
    background-image: url("../images/background.jpg");
}
trayvon #10 · 2020-03-19 23:07:31

好的,希望这对某人有帮助! 我最近也遇到类似情况,希望为主题实现图像。如果您在app / assets / images文件夹中有一个名为blog_image.jpeg的图像,则该解决方案在home_page_header.html.erb文件中对我有用:

<!-- Page Header -->
<header class='masthead' style='background-image: url(assets/blog_image.jpeg)'>
  <div class='container'>
    <div class='row'>
      <div class='col-lg-8 col-md-10 mx-auto'>
        <div class='site-heading'>
          <h1>Omega</h1>
          <span class='subheading'>Sample text</span>
        </div>
      </div>
    </div>
  </div>
</header>
tj #11 · 2020-03-19 23:07:32

例如,如果您将图片放入app / assets / images中,并且其名称为“ zi-fullscreen-bg.png”那么你可以使用

.hero-unit.fullscreen-image-bg {
  background-image: url('zi-fullscreen-bg.png');
}

至少对我有用!

goddard #12 · 2020-03-19 23:07:33

似乎双引号有效。

这是我的示例:

body {
  background-image: url("sunset");
}

日落jpeg位于我的资产文件夹中。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册