在 wordpress 主题中插入图片 .css 所以它是响应式的

Question

我正在尝试将自定义 header 放在 wordpress 主题上。我现在从主题文件夹中打开 main.css 和 responsive.css。我将图像放在图像文件夹中。现在 banner/header 是纯色 2d2d2d，我在 main.css

上找到了这一行

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

我的横幅是矩形的，我使用相同的颜色 (2d2d2d) 在我制作的图像中创建淡入淡出。如果 window 全屏打开，它需要保持在右侧并且背景颜色在图像结束处可见。

据我所知，我写了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

Answer 1

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

直接把图片放在#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 文件。如果您添加自定义颜色，您不想通过使用背景 shorthand 并且不提供颜色值来覆盖默认背景颜色。如果直接编辑 main.css 可以使用 shorthand，但需要添加颜色值，如：

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

在 wordpress 主题中插入图片 .css 所以它是响应式的

Inserting an image in a wordpress themes .css so it's responsive

css

wordpress

themes

image

responsive