CSS背景图片，文字设置背景

最新推荐文章于 2024-08-17 10:21:33 发布

原创最新推荐文章于 2024-08-17 10:21:33 发布 · 2.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了CSS中如何实现背景图片的叠加，通过`background-image`属性添加多张背景图片，以及使用单独的背景属性进行定位。同时，探讨了背景图片的尺寸控制，如`background-size`的`contain`和`cover`选项。此外，还讲解了`background-repeat`、`background-origin`和`background-clip`属性的作用，以及如何将背景图片应用于文字。最后，展示了如何使用CSS创建文字背景效果。

关于CSS里的背景图片

- CSS背景

CSS背景

叠加背景图片：

background-image 可以为一个元素添加多个背景，第一幅图片最靠近观看者

#div {
	background-image : url(a.gif), url(b.gif), url(c.gif);    
}

多层叠加的背景还可以使用单独的背景属性，如下

#div {
	background: url(cat.jpeg) top center no-repeat, url(back.webp) 100% 100%;
}

图片展示叠加效果

背景图片尺寸：

background-size : width height;

px, %, 或者关键字

contain(按图片尺寸小的边展开，可能有部分区域不会被覆盖)，

cover（按图片尺寸大的部分展开，可能有部分图片展示不出来）
```
//全尺寸背景，匹配窗口缩放
background: url(a.jpg) no-repeat center fixed; 
background-size: cover;
```
background-repeat : repeat;复制 no-repeat; 不复制

background-origin：指定图像位置

div { /*接受三个值*/
    background-origin : border-box; /*图片从边框左上角开始*/
    background-origin : padding-box;/*默认：图片从内边缘左上角开始*/
    background-origin : content-box;/*从内容左上角开始*/
}

请添加图片描述

background-clip：指定背景绘制区域

div { /*接受三个值*/
    background-clip : border-box; /*默认：背景绘制到外部边缘*/
    background-clip : padding-box;/*背景绘制到内边距边缘*/
    background-clip : content-box;/*在内容框中绘制背景*/
}

文字设置背景：

div {
 	background-image: url("back.webp");
	background-clip : text;
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
}

请添加图片描述

标签

#css #html #html5