Div未出现的背景图像

我在一个具有背景图像的div内放置图像。但只有图像本身出现，父div的背景图像没有出现。Div未出现的背景图像

我的代码：

<div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; line-width:810px; line-height: 718px;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

来源

2012-07-12 Asim Siddiqui

也需要父代码。 – Jared 2012-07-12 13:42:22

从技术上讲，应该没有父母的div b/c继承人是一个id – 2012-07-12 14:23:46

代码有几个问题，但阻止背景显示的问题是position: absolute。这样，img元素将从文档的正常流程中取出，div内部不会留下任何内容，因此其高度将为零。

但是，如果您为div设置的尺度明确，那么你可以有img绝对定位的（虽然它可能会更好，更稳健，对div设置position: relative，使img“绝对定位”将是相对于div）。对于尺寸标注，请使用height和width属性。

合规浏览器忽略设置top:200; left:350。改为使用top:200px; left:350px。

来源

2012-07-12 14:25:25

<div id="proceedbody" style="width:810px; height:718px; background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg) no-repeat 0 0;">

来源

2012-07-12 13:44:01

您使用的线高和线宽的替代宽度和高度的div你内嵌样式...

来源

2012-07-12 13:44:37 Brant

你必须设置一个高度（和宽度）的外部股利或它只会像图像一样高。由于img-tag中的图像在其边框中是半透明的，并且网页无法显示半透明，所以整个外部div被图像覆盖。

编辑：设置你内心的图像作为背景图像内的div可能是一个更好的办法：

#proceedbody{ 
    background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); 
    height: 810px; 
} 

#inside{ 
    background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png) no-repeat left top transparent; 
    height: 276px; 
} 

    <div id="proceedbody"> 
    <div id="inside"></div> 
    </div>

来源

2012-07-12 13:47:18 32bitfloat

所有你需要做的是改变“线宽”和“行高“到 ”高度“ 和 ”宽度“，并添加：background-size:100% 100%;到#proceedbody

<div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; width:810px; height: 718px; background-size:100% 100%;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

链接的jsfiddle：http://jsfiddle.net/justinc535/cSrQL/

来源

2012-07-12 14:15:59

Div未出现的背景图像

回答

相关问题