向 CSS 背景添加其他图像 [重复]

Posted 2023-02-21

【中文标题】向 CSS 背景添加其他图像 [重复]

【英文标题】：Adding additional images to CSS background [duplicate]

【发布时间】：2014-11-03 03:20:28

【问题描述】：

我正在尝试通过 CSS 添加三个社交媒体图标。公司徽标通过 CSS (images/logo.png) 添加到网站。

我尝试通过添加逗号进行扩展，但这会导致整个徽标消失。

我们将不胜感激任何 CSS 建议。

更新

有问题的“重复”没有解决我遇到的位置重叠问题。

多张图片问题现已解决。我现在遇到的唯一问题是将单独的链接应用到每个社交媒体按钮。有什么建议吗？

#heading h1 
    text-align: left;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 92px;
    background:#396ba5 url(images/logo.png) no-repeat 495px 0px;

【问题讨论】：

I've attempted extensions by adding commas 它在哪里？请展示你的尝试。

【参考方案1】：

除了背景图像之外，您当前的背景还具有指定的颜色。在这种情况下，颜色需要是最后指定的背景。 Only the last background can include a background color. 这样的东西应该可以工作：

#heading h1 
    text-align: left;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 92px;
    background: url(images/logo.png) no-repeat 495px 0px,
                url(images/twitter.png) no-repeat 495px 50px,
                url(images/facebook.png) no-repeat 545px 50px,
                url(images/facebook.png) no-repeat 545px 50px,
                #396ba5;

相关：https://***.com/a/5427455/1590962

【讨论】：

这似乎已经开始了，但它最终取代了 #396ba5 并导致第一个社交媒体图标的重复。

我可能在复制和粘贴时使用了多余的逗号（我现在已将其删除）。如果您向我展示您的 CSS，我可能会告诉您问题所在。

这里是 CSS，图标现在被推到 logo.png 后面：jsfiddle.net/xy4hvg3p

这似乎对我有用（我所做的只是替换了 URL，因此它们实际上显示了一些东西）：jsfiddle.net/hephistocles/f35hbxbw/1 响应您的编辑 - 可以通过更改后台渲染顺序来更改CSS中背景的顺序。 CSS 中的第一张图片呈现在顶部。

最新的编辑效果更好。但是，它现在将所有内容（包括主徽标）与社交媒体图标顶部的主徽标对齐。是否只是为每个添加一个位置代码来解决这个问题？ - 我应该添加我的目标是将徽标放在左侧，将图标放在徽标的右侧

【参考方案2】：

我不知道为什么它不起作用。

将您的代码与此进行比较

background: 
   url(images/logo.png) 496px 0px no-repeat,  
   url(thingy.png) 10px 10px no-repeat,   
   url(Paper-4.png);                      

或

background-image: url(images/logo.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;

或

background: url(images/logo.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;

【讨论】：

图标的位置是现在关注的焦点，似乎越来越近了