Question

我尝试更改图片标签，没有运气。我在这里回顾了其他帖子并尝试了这些解决方案。我也使用亚马逊云端。

<div id="signup" class="container-fluid">
</div>

#signup{
text-align: center;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)),
url("zoom1028.jpg");
}

Answer 1

在Chrome右键单击检查时，开发人员工具应该显示，现在点击选项卡网络，看看是否有任何404错误，也许图像网址没有指向它应该。

查看我使用您的代码构建的示例：

https://jsfiddle.net/opqtncms/1/

<div id="signup" class="container-fluid">
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>


#signup {
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url("https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}

最好的问候！

Answer 2

我认为你应该使用＃选择器，因为＆＃34;注册＆＃34;是一个id。

#signup{
...
}

Answer 3

首先设置fallback background-image，然后在图片上应用gradient。

#signup{
  text-align: center;
  background-image: url("zoom1028.jpg"); # fallback
  background-image: url("zoom1028.jpg"), linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4));

}

希望这会有所帮助。

Answer 4

我使用了sass Image特定助手： background-image：image-url（＆＃34; photo.jpg＆＃34;）并且它有效。根据这里的sass说明https://github.com/rails/sass-rails。

Div背景图像没有在heroku中显示。但是，徽标显示

4 个答案: