网页设计：添加背景图像css代码 background-image:url(bg.jpg) bac

Posted 2023-05-04

网页设计：添加背景图像css代码
background-image:url(bg.jpg)
background-repeat;no-repeat
如果使用复合属性background简写，则代码为

你可以：background:url(../images/图片名) no-repeat 0 0 ;后面的no-repeat是背景图像不平铺，在后面两个参数则是图片的位置，自己可以任意调整！！！希望对你有帮助！！！ 参考技术A 简写的时候，只需要把多个属性值用空格分开就可以实现了。本回答被提问者采纳 参考技术B background：#fff(颜色) url(bg.jpg)(背景图) no-repeat(是否铺满) left(左右定位) top(上下定位); 参考技术C 直接background:url（bg.jpg） no-repeat;
不过你这路径对吗 参考技术D background:url(bg.jpg) no-repeat;

在 Rails 4 中添加背景图像

【中文标题】在 Rails 4 中添加背景图像

【英文标题】：Adding background image in Rails 4

【发布时间】：2015-01-11 05:00:50

【问题描述】：

如何在 Rails 4 中包含背景图片？我正在尝试将它添加到我的 HTML 中的 div 中。目前，该图像位于我的/assets/images 目录中。

HTML：

<header>
  <div class="background_image">

  </div>
</header>

CSS：

.background_image 
    background: url(/assets/header-bg.jpg);

使用我目前拥有的代码，没有显示图像

【问题讨论】：

后台url路径不应该是/assets/images/header-bg.jpg

@Bijan 好吧，我认为没有 rails 4 是的，但我正在阅读，在我看来，rails 做了一些不需要 images 部分的预处理

然后看看Here

【参考方案1】：

这是一篇旧帖子，但我觉得这仍然可以使用更好的答案。在引导程序中调整图像的大小是很棘手的，所以要让它调整或显示为你想要的，需要一些 Photoshop，但是将它放到你想要的位置的代码可能如下所示，因为这应该涵盖几乎所有浏览器：

background: url('header-b.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;

此外，您可以根据图像和/或空间的大小向背景添加更多 CSS：

background: url('header-b.jpg') no-repeat center center;

添加fixed 将锁定您的图像，但可以使用。

【参考方案2】：

首先，您需要在 CSS 文件中添加 SCSS 扩展名，例如 main.css.scss。

这样你就可以使用asset helpers，比如：

.background_image 
    background: image-url('header-bg.jpg');

如文档中所述，image-url("header-bg.jpg") 变为 "url(/assets/header-bg.jpg)"。

您的标记当前为空 (div.background_image)，因此您需要在样式中添加一些 height 以使其正常工作。

<header>
    <div class="background_image">
        <!-- no content -->
        <!-- add some content or specify some height -->
    </div>
  </header>

注意：要完成所有这些工作，您必须使用sass-rails gem (it's default in rails 4)。

【讨论】：

显然图像已经出现在浏览器中，但它非常小（想想细线），所以它似乎不存在。但是，添加诸如height:600px; 之类的属性会显示图像。当我拉伸浏览器时，不确定如何正确显示此图像。我需要 CSS 中的内容来使用浏览器在保持静态大小的同时缩放图像

你必须使用百分比（%）而不是固定值（px)。