首页 >

CSS背景图片样式:background-image – CSS – 前端,检测是否支持css3

css网页设计,css自多省略,字体取消选中css,css 背景适应屏幕大小,css 移动到指定div,dw中css样式水平居中,检测是否支持css3CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3

语法:

background-image:url(图片路径);

说明:

跟引入图片(即img标签)一样,引入背景图片也需要给出图片路径才可以显示。

举例:

在线测试<!DOCTYPEhtml><html><head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
div{background-image:url(img/haizei.png);}</style></head><body>
<div></div></body></html>

浏览器预览效果如下图所示。

css网页设计,css自多省略,字体取消选中css,css 背景适应屏幕大小,css 移动到指定div,dw中css样式水平居中,检测是否支持css3CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3

分析:

怎么回事,为什么背景图片没有显示出来呢?这是因为大家没有给div元素定义width和height,此时div元素的宽度和高度都为0,那背景图片肯定不会显示啊!

大家需要为div元素添加width和height,代码如下:

div{width:250px;height:170px;background-image:url(img/haizei.png);
}

其中width和height跟图片实际宽度和高度相等,此时在浏览器预览效果如下图所示。

css网页设计,css自多省略,字体取消选中css,css 背景适应屏幕大小,css 移动到指定div,dw中css样式水平居中,检测是否支持css3CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3

背景图片跟图片是不一样的,背景图片是使用CSS来实现,而图片是使用HTML来实现。两者的使用场合也不一样,大多数情况下都是使用图片来实现,不过某些场合无法使用图片时大家再考虑背景图片形式。

此外还有一点要说明一下:下面这两种引入背景图片的方式都是正确的,一个给路径加上了引号,另外一个没加引号。不过在实际开发中,建议采用不加引号的方式,因为这种方式更加简洁。

/*方式1:路径加上引号*/background-image:url("img/haizei.png");/*方式2:路径没加引号*/background-image:url(img/haizei.png);



CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3
  • 白云飘飘幼儿歌曲欢乐颂的下载网址吗 - CSS - 前端,css3边框直线
  • 白云飘飘幼儿歌曲欢乐颂的下载网址吗 - CSS - 前端,css3边框直线 | 白云飘飘幼儿歌曲欢乐颂的下载网址吗 - CSS - 前端,css3边框直线 ...

    CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3
  • css选择器相关小问题,css几种选择器的使用 - CSS - 前端,360浏览器居中css
  • css选择器相关小问题,css几种选择器的使用 - CSS - 前端,360浏览器居中css | css选择器相关小问题,css几种选择器的使用 - CSS - 前端,360浏览器居中css ...

    CSS背景图片样式:background-image - CSS - 前端,检测是否支持css3
  • css样式基本选择器有哪些,类选择器语法 - CSS - 前端,css table冻结表头
  • css样式基本选择器有哪些,类选择器语法 - CSS - 前端,css table冻结表头 | css样式基本选择器有哪些,类选择器语法 - CSS - 前端,css table冻结表头 ...