怎么在css中插入图片

html-css013

怎么在css中插入图片,第1张

css插入图片方法如下：

操作设备：戴尔笔记本电脑

操作系统：win10

操作程序：html编辑器v8.21

1、打开html编辑器并创建一个新的html文件。

2、新建完一个新的html文件后，在index.html的<style>标签中，输入如下所示的CSS代码。

3、输入完CSS代码之后，接下来运行index.html页面，可以发现，本地图片通过背景图片衜中的本地路径成功调用为了背景图片，图片就成功加入了。

首先要将下载好的图片放入css文件夹中；

在CSS中，可以使用background-image属性或background属性来插入图片。background-image属性或background属性可以为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。具体代码如下：

<div id="bgimg"></div>

#bgimg {

background: #333 url(图片路径) center center no-repeat

}

第一个参数，图片底层的背景颜色，第二个参数，图片路径，第三个参数，图片上下的相对位置（其他参数left,right），第四个参数，图片左右的相对位置（top,bottom），第五个参数，图片的重复（其他参数 repeat,repeat-x,repeat-y）

<style type="text/css">

    #imgDiv{

        background:url(https://gss0.bdstatic.com/70cFsj3f_gcX8t7mm9GUKT-xh_/zhidaoribao2014/2015year/1026/top.jpg)

        width:400px

        height:300px

        overflow:hidden

    }

</style>

<div id="imgDiv"></div>

这段代码你试试看，在div中完全没有添加图片标签，而是根据css中的background属性给div添加一张图片作为背景。这样做的好处是允许在同一个div中用hover来实现图片的鼠标响应切换，坏处就是无法调整图片的大小。