在HTML中添加两个独立的背景可以通过CSS的background属性来实现。具体的方法有以下几种:
body {
background-image: url(background1.jpg), url(background2.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat, repeat;
background-size: cover, auto;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(background1.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(background2.jpg);
background-position: bottom right;
background-repeat: repeat;
background-size: auto;
z-index: -1;
}
body {
background: linear-gradient(to top left, #ff0000, #00ff00), radial-gradient(circle at bottom right, #0000ff, #ffff00);
background-repeat: no-repeat;
background-size: cover;
}
以上是三种常见的在HTML中添加两个独立背景的方法,根据具体需求选择适合的方式即可。
领取专属 10元无门槛券
手把手带您无忧上云