欢迎光临
我们一直在努力

CSS3 | 多重背景图像

多重背景图像引用

在同一个元素中允许我们设置多个背景图,通过CSS/CSS3相关属性,我们还可以对这些背景图进行调节,以达到我们想要的效果。

多重背景语法非常简单,我们只需要在一行background-image后引用多个图片即可,多个图片中间用逗号隔开。

background-image:url(img1) , url(img2) , url(img3);

当我们引用多个背影图片后,他们会重叠起来,其中第一个图片(img1)将会放置在最上方。

多重背景图片属性

当我们需要对他们进行布局或排列时,我们可以通过相关属性进行调节,属性的值仍然是依次写出来,中间用逗号隔开。

background-repeat: no-repeat,no-repeat,no-repeat;
background-size: 260px,400px,208px;
background-origin: content-box,content-box,content-box;
background-clip: content-box,content-box,content-box;
background-position: top left,260px 0px,660px 0px;

多重背景图片实战

通过在一个div中引用三张图片,并让三张图片以此排列起来。

.div{
	width: 808px;
	height: 210px;
	padding: 5px;
	border: #b2b2b2 solid 1px;
	background-image: url(img/1.jpg),url(img/2.jpg),url(img/3.jpg);
	background-repeat: no-repeat,no-repeat,no-repeat;
	background-size: 260px,400px,208px;
	background-origin: content-box,content-box,content-box;
	background-clip: content-box,content-box,content-box;
	background-position: top left,260px 0px,660px 0px;
}

<div class="div"></div>

展示效果如下:

赞(1) 打赏
未经允许不得转载:散人研 » CSS3 | 多重背景图像
分享到: 更多 (0)

评论 抢沙发

8 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏