background-image 四个角落设置不同图片
时间: 2023-07-07 12:21:02 浏览: 45
可以使用 CSS 的 `background-image` 属性以及 `background-position` 属性来实现在四个角落设置不同的背景图片。具体做法如下:
1. 首先在 CSS 中为元素设置四个背景图片,可以使用多个 `background-image` 属性或是使用 CSS3 的 `background` 属性:
```css
.element {
background-image: url(top-left.jpg), url(top-right.jpg), url(bottom-right.jpg), url(bottom-left.jpg);
/* 或者使用 background 属性 */
/* background: url(top-left.jpg) top left no-repeat, url(top-right.jpg) top right no-repeat, url(bottom-right.jpg) bottom right no-repeat, url(bottom-left.jpg) bottom left no-repeat; */
}
```
2. 然后分别为四个图片设置位置,可以使用关键字或者是具体的像素值来设置:
```css
.element {
background-image: url(top-left.jpg), url(top-right.jpg), url(bottom-right.jpg), url(bottom-left.jpg);
background-position: top left, top right, bottom right, bottom left;
/* 或者直接使用像素值来设置 */
/* background-position: 0 0, 100% 0, 100% 100%, 0 100%; */
}
```
这样就可以实现在四个角落设置不同背景图片的效果了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)