当它是较小 div 的容器但没有其他内容时，如何用背景图像填充 div？

Posted 2023-05-08

【中文标题】当它是较小 div 的容器但没有其他内容时，如何用背景图像填充 div？

【英文标题】：How do I fill a div with the background-image when it is a container for a smaller div but has no other content?

【发布时间】：2015-07-14 15:46:07

【问题描述】：

我正在编写一些代码，我想将鼠标悬停在图像上的任意位置以访问悬停。但我不希望一整块彩色半透明填充物覆盖图片，只需要一条细的纯色条。

为了实现这一点，我为 div 创建了一个容器，并将较小的纯色 div 放入其中。但是，容器的背景（图像）没有显示出来。我认为这是因为 div 除了较小的 div 之外没有任何内容。

我该如何解决这个问题？

    <center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
    <div class="dewisidebar">
    <div style="background-image: url('http://placehold.it/80x350'); width: 80px; height: 350px;">
    <div class="dewisidecontainer"><div class="dewisidelinks">
    Three<br>Links<br>Here
    </div></div></div></div>

    <div class="dewitracker">
Information here
    </div>
    </div></center>

    <style type="text/CSS">

    .dewisidebar 
    width: 80px;
    height: 350px;
    vertical-align: top;
    background: #ff80c4;
    padding: 10px;
    display: inline-block;
    font-family: 'times new roman';
    size: 10px;
    color: black;
    

    .dewisidecontainer 
    width: 80px;
    height: 350px;
    padding: 130px 0px 0px 0px;
    background: none;
    opacity: 0.0;
    

    .dewisidecontainer:hover 
    opacity: 1.0;
    

    .dewisidelinks 
    width: 80px;
    height: auto;
    background: #ff80c4;
    font-family: Arial;
    font-size: 15px;
    color: black;
    line-height: 130%;
    padding: 5px 0px;
    

    .dewitracker 
    width: 370px;
    height: 350px;
    vertical-align: top;
    background: #c4ff80;
    padding: 10px;
    display: inline-block;
    font-family: 'times new roman';
    size: 10px;
    color: black;
    
    </style>

请帮忙:)

【问题讨论】：

能否请您改写一下，抱歉没有按照您的意思进行操作？您只是希望能够在图像上方显示悬停消息吗？

@DavidGilliam 是的，我基本上是这样做的，但是我的编码中的所有内容都按照我现在想要的方式工作，除了图像（placehold.it/80x350 之一）没有覆盖 div作为背景。 background-size 似乎根本没有帮助，但是如果我更改 div 的填充以使图片显示，那么它会改变“dewisidecontainer” div 内的“dewisidelinks” div 的位置？我希望这更有意义......

@DavidGilliam 实际上，我很抱歉，这可能同样不清楚。这里很早。我想我要问的，写得更好，是如何让背景图像填充没有任何内容的 div。因为在这种情况下，那里的内容似乎根本不会影响背景大小。

我夸大了这一点，但有类似的东西吗？ jsfiddle.net/davygxyz/s2kyu3gv

@DavidGilliam 我不太确定我在那个页面上看的是什么......它在 chrome 和 IE 中的显示方式不同（我经常使用两者）但是，我想我刚刚发现了为什么背景图像没有出现在我的编码中，这是因为某些东西（不知道是主机还是浏览器）不接受占位符作为图像，因为它没有完成.jpg/.png 等... 很抱歉浪费了您的时间>.

【参考方案1】：

取出您创建的额外 div 并将背景添加到 dewisidebar。 在 CSS 中，我将 background-size 设置为 100% 100%，这意味着宽度和高度将是其 div 的全长。

http://jsfiddle.net/davygxyz/5hxdznz0/

html

<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
    <div class="dewisidebar">
    <div class="dewisidecontainer"><div class="dewisidelinks">
    Three<br>Links<br>Here
</div></div></div>

    <div class="dewitracker">
Information here
    </div>
    </div></center>

CSS

.dewisidebar 
    width: 80px;
    height: 350px;
    vertical-align: top;
    background: #ff80c4;
    padding: 10px;
    display: inline-block;
    font-family: 'times new roman';
    size: 10px;
    color: black;

    background-image: url('http://placehold.it/80x350');
    background-repeat:no-repeat;
    background-size:100% 100%;
    

    .dewisidecontainer 
    width: 80px;
    height: 350px;
    padding: 130px 0px 0px 0px;
    background: none;
    opacity: 0.0;
    

    .dewisidecontainer:hover 
    opacity: 1.0;
    

    .dewisidelinks 
    width: 80px;
    height: auto;
    background: #ff80c4;
    font-family: Arial;
    font-size: 15px;
    color: black;
    line-height: 130%;
    padding: 5px 0px;
    

    .dewitracker 
    width: 370px;
    height: 350px;
    vertical-align: top;
    background: #c4ff80;
    padding: 10px;
    display: inline-block;
    font-family: 'times new roman';
    size: 10px;
    color: black;