CSS的背景图投影功能可以让我们将背景图像转化为投影效果，给网页增添美感。
/* CSS样式表 */
.shadow {
border: 2px solid #ddd;
box-shadow: 2px 2px 5px #888;
background-image: url("bg.jpg");
background-size: cover;
background-clip: padding-box;
}
上述代码中，我们给一个class为“shadow”的元素设置了边框，阴影和背景图片。
/* box-shadow: offset-x offset-y blur-radius spread-radius color */ box-shadow: 2px 2px 5px #888;
我们可以看到，box-shadow属性中指定了水平偏移量为2px、垂直偏移量为2px、模糊半径为5px、投影扩散半径为0，以及阴影颜色为#888。
/* 如果需要投影扩散半径可以设置为非0值 */ box-shadow: 2px 2px 5px 1px #888;
如果希望投影扩散半径不为0，只需在box-shadow属性中指定即可。
/* background-clip: padding-box/ border-box/ content-box */ background-clip: padding-box;
背景图像覆盖边框、内边距和内容区域三个部分，我们可以通过background-clip属性指定覆盖的区域。如果想要背景图像只覆盖元素的内边距和内容区域，可以将属性值设置为content-box；如果想要覆盖的范围还包括元素的内边距，则可以设置为padding-box；我们上述代码中就是设置为了padding-box。
以上就是关于CSS背景图投影功能的简要介绍和代码示例。希望各位开发者可以运用这个功能，让网站更加美观。
