为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>
希望是你想要的...