想必仔细的同学在浏览网页时,会发现有的网站并不是单纯的白色背景,而是有背景图片。那么你知道 CSS 怎么加背景图片?这篇文章告诉你。
background 属性
在学习如何添加背景图片前,我们需要先学习 background 属性。它是专门用来设置背景色或者背景图片的。
-
background-color
: 设置背景颜色。 -
background-position
: 设置背景图像的位置。 -
background-size
: 设置背景图片的尺寸。 -
background-repeat
: 设置是否重复背景图像。 -
background-origin
: 设置背景图片的定位区域。 -
background-clip
: 设置背景的绘制区域。 -
background-attachment
: 设置背景图像是否固定或者随着页面的其余部分滚动。 -
background-image
: 设置背景图片路径。
其中设置背景图片就需要用到 background-image
。
background-image:url(图片路径)
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS设置背景图片 - 字节宝(zijiebao.com)</title>
<style type="text/css">
body{
background: url("./image/img1.png") no-repeat;
}
</style>
</head>
<body>
</body>
</html>
实现效果:
不难发现,由于图片过小,实现效果欠佳,背景图片并不能铺满整个屏幕。在《CSS怎么设置背景图片自适应全屏?附源码!》一文中,介绍了如何设置背景图片自适应全屏,感兴趣的同学可以自行回顾,此处就不在介绍。
以上就是文章“CSS 怎么加背景图片?附源码!”的详细内容,更多 CSS 学习请前往 zijiebao。