css中设置多张背景图片

最新推荐文章于 2024-06-16 22:13:37 发布

心若向阳无谓悲伤

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量1.4w

点赞数 3

分类专栏： Web知识学习文章标签： css中设置多张背景图片 css 多张图片快速居中 css图片居中

本文链接：https://blog.csdn.net/qq_31490071/article/details/88716255

版权

Web知识学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

有一些应用场景中，我们需要叠加设置多张图片，一般我们可能是采用img来设置，但还有一种更简单的方法，采用背景属性来设置，css提供了可同时设置多张背景图的属性。语法如下：

.bg{
    background:
    url('../img/bg1.png'),
    url('../img/bg2.png'),
    url('../img/bg3.png')
}

为不同的背景图片设置大小和位置：

.bg{
    height:100%;
    width:100%;
    background:
    url('../img/bg1.png'),
    url('../img/bg2.png'),
    url('../img/bg3.png');
    background-size:75%,50%,cover;
    background-position:top50px right 80px,40px 40px,top center;
    background-repeat:no-repeat;
}

设置background-size和position属性时，按照背景的显示顺序进行设置。背景图片最先设置的图片显示在最上面，最后设置的图片显示在最下面。

另外背景可以混合设置：比如你可以同时设置图片和背景色，很多时候我们开发中会遇到以下这种效果，使用这种方法可以最快搞定，而且不用再考虑适配性问题。

实现代码：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>An example</title>
	<meta name="viewport" content="width=device-width">
<style>
html,body {
	margin: 0;
	padding: 0;
}

.bg-multi {
	height: 100vh;
	width: 100vw;
	background: 
	url('icon-empty.png'),#FAFAFA;
	background-size:30vw, cover;
	background-position:center,center;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
	<div class="bg-multi"></div>
</body>
</html>

心若向阳无谓悲伤

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
css中设置多张背景图片

有一些应用场景中，我们需要叠加设置多张图片，一般我们可能是采用img来设置，但还有一种更简单的方法，采用背景属性来设置，css提供了可同时设置多张背景图的属性。语法如下：.bg{ background: url('../img/bg1.png'), url('../img/bg2.png'), url('../img/bg3.png')}为不同的背景图片...
复制链接

扫一扫

专栏目录