为div设置背景图片后，为什么不显示背景图片？
webView嵌套的网页代码为
<html>
<head>
<script></script>
</head>
<body>
<div id="div1" style="background-image:url('Lighthouse.png');width:100px;height:100px"></div>
</body>
</html>
图片路径正确。 展开
没听说过div还要设置display:block,div中不需要display:block.
原因：
1、编码错误，即代码编写没有按照规范，属性名写错。
2、图片路径不对。
3、使用background来实现背景图片，可能因为图片太大或者太小，显示出来的图片只有一部分，二者一部分刚好是透明的，造成没有图片的效果，因此必须设置background-size来控制图片的显示。
4、背景图片调用方式不对，不能使用本地路径。
将hanshan.png和当前页面放在一个目录，则直接写成这样：
#cuyu {
background-image: url(hanshan.png);
height: 500px;
width: 1000px;
}
或者将hanshan.png放在images目录，保证当前页面和images在同一级目录，则样式为：
#cuyu {
background-image: url(images/hanshan.png);
height: 500px;
width: 1000px;
}
扩展资料：
DIV格式使用方法的注意事项：
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的特定的格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。
参考资料来源：百度百科-DIV
因为你这个div里面没有内容，所以，暂时为空
尽管你设置了width，和height，但是这个还差一个代码 display:block; 定义为块元素， 那么就可以看到你的背景图片了
完整代码是：
<html>
<head>
<script></script>
</head>
<body>
<div id="div1" style="background-image:url('Lighthouse.png');display:block;width:100px;height:100px"></div>
</body>
</html>
从来没听说过div还要设置display:block;！我去！
<div id="div1" style="background:url('Lighthouse.png') no-repeat;width:100px;height:100px"></div>试试这个吧！另外你确定你的页面就这些代码？
<style type="text/css">
<!--
#fhg {
float: left;
background-color: #F00;
height: 1245px;
width: 1511px;
background-image: url(images/shouye%20_r1_c1.jpg);
}
-->
</style>
希望是你想要的...
|
广告 您可能关注的内容 |
