当前位置:首页 » 背景图片 » 给div设置背景图片
扩展阅读
孤独女生图片卡通 2024-10-05 09:25:08
图片视觉元素有哪些 2024-10-05 09:24:25
ps做透明防盗图片 2024-10-05 09:15:57

给div设置背景图片

发布时间: 2022-01-07 08:57:08

1. div+css如何把图片设为背景

关于的div+css是前端基础的问题,只要看看css手册就能明白。下面是我根据问题简单写了个例子,不清楚的可以继续交流。

css语法基础:

实例效果图代码查看器中h1标签元素使用css的background背景图片,no-repeat为不平铺。

有不清楚的继续交流吧!

2. div如何设置背景图片的图片不够长

如果想兼容所有浏览器,不能这样做,只能在div里加img标签,然后设置div的宽高跟img的宽高相同。
如果只需要兼容高级浏览器,可以再加一个属性,background-size:100% 100%;

3. css怎么给div加背景图片

通过css:background-image语句设置背景。

background-image 属性会在元素的背景中设置一个图像。根据background-repeat属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。初始背景图像(原图像)根据background-position属性的值放置。

(1)相对的文件位置:

(3)给div设置背景图片扩展阅读:

background-image 属性为元素元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

4. HTML语言中,如何在div中插入背景图片

图片和网页放一个文件夹里面,注意图片后缀,我这里是.jpg就只适合JPG图片的,其他类型图片自行改后缀

5. div标签如何插入背景图

<bodystyle="width:600px;text-align:center;">
<divstyle="height:352px;border-bottom-style:dashed;border-bottom-color:#00C;width:800px;background-image:url(pic.jpg)">
<h1>静夜思</h1>
<h2>作者:李白</h2>
<p>床前明月光,</p>
<p>疑是地上霜,</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</div>
<divstyle="text-align:left;padding-top:5px;">
注释:静夜思:宁静的夜晚所引起的相思;疑:怀疑、以为;举:抬、仰。
</div>
</body>

6. 为div设置背景图片后,为什么不显示背景图片

没听说过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;
}

(6)给div设置背景图片扩展阅读

DIV格式使用方法的注意事项:

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的特定的格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div> 元素同时应用 class 和 id 属性,但是更常见的情况是只应用其中一种。

这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的特定的元素。

参考资料来源:网络-DIV

7. 怎样用css给一个空div添加背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>liuxing test</title>
<style type="text/css">
.divbgpic{
background-image:url('jquery/jquery-ui-1.9.1.custom/jquery-ui-1.9.1.custom/css/base/images/ui-icons_cd0a0a_256x240.png');
width:500px;
height:500px;
}
</style>
<script type="text/javascript"
src="jquery/jquery1.7.1/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="divbgpic"></div>
</body>
</html>

background-image:url('jquery/jquery-ui-1.9.1.custom/jquery-ui-1.9.1.custom/css/base/images/ui-icons_cd0a0a_256x240.png');这样子

8. html中在div中加背景图片

html在div加背景图片的具体操作步骤如下:

1、新建一个html文档,编写一个类名等于setbg的div标签。


9. 设置div背景图片(急急急

这样设置div背景图片的写法是错误的,正确的写法应该是这样

css内嵌式写法:div{ background:url('图片的路径')}

css行内样式写法:style=“background:url('图片的路径')”

下面举例说明

步骤1:新建一个html页面,修改里面的代码,添加1个div标签,id为div1,同时准备2张图片作为背景图分别叫“01.jpg”和“02.jpg”,此时div1未设置背景图,在浏览器中显示为