在 wordpress 主题 .css 中插入图像，使其具有响应性答案

【问题标题】：Inserting an image in a wordpress themes .css so it's responsive在 wordpress 主题 .css 中插入图像，使其具有响应性
【发布时间】：2016-05-06 15:11:30
【问题描述】：

我正在尝试在 wordpress 主题上放置一个自定义标题。我现在从主题文件夹中打开了 main.css 和 responsive.css。我将图像放在图像文件夹中。现在横幅/标题是纯色 2d2d2d，我在 main.css 上找到了这一行

#main-menu {
    float: left;
    width: 100%;
    background-color: #2D2D2D;
    color: #666666;
    padding: 0;
}

我的横幅是矩形的，我使用相同的颜色 (2d2d2d) 来淡入我制作的图像。如果窗口全屏打开，它需要保持在右侧，并且在图像结束的地方可以看到背景颜色。

据我所知，我写了background: url(../images/banner104.png) no-repeat bottom right; 插入某处。我不知道具体在哪里。我知道在 main.css 这不起作用

.main-menu ul li ul.sub-menu {
    position: absolute; 
    top: 100%;
    left: 1px;
    z-index: 9999999;
    min-width: 180px;
    list-style: none;
    font-size: 13px;
    float: none;

    display: block;
    margin: 0;
    margin-left: -5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: url(../images/banner104.png) no-repeat bottom right;
    display: none;
    opacity: 0;
    -webkit-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02);
    -moz-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02);
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .02);
}

如果检查主页会给你一些线索，这是我的网站。 www.nationalcomicsnetwork.net

【问题讨论】：

标签： css wordpress image themes responsive

【解决方案1】：

首先：您的第一个代码将 main-menu 显示为元素 id（注意 #），第二个代码显示为一个类（注意 .）。也许这就是罪魁祸首？

把图片直接放在#main-menu上怎么样：

#main-menu {
    float: left;
    width: 100%;
    background-color: #2D2D2D;
    color: #666666;
    padding: 0;

    /* new */
    background-image: url("../images/banner104.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

我也不建议您将横幅设为 1206x104 像素，并且像您那样使用纯色背景色。当您已经使用 png 文件时，请使用透明背景，并且仅使其与淡出一样宽。否则，您可能会遇到响应问题（尤其是在较小的屏幕或浏览器宽度上）。

我拆分了background属性，因为我不知道你是直接编辑main.css还是添加你自定义的css文件。如果您添加自定义的，您不想通过使用背景速记并且不提供颜色值来覆盖默认背景颜色。如果直接编辑 main.css 可以使用简写，但需要添加颜色值，如：

background: #2D2D2D url("../images/banner104.png") no-repeat bottom right;
background-size: contain;

【讨论】：