扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关6个CSS背景图片设置的方法技巧，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
1.如何将背景图像完美地适合视口
body {
background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
2.如何在CSS中使用多个背景图片
body {
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
3.如何创建三角背景图像
当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时。
这是通过为整个视口创建两个div来完成的，然后需要向它们两个都添加背景图像，然后，第二个div需要一个clip-path属性才能创建三角形。
clip-path属性创建一个裁剪区域，该区域设置应显示元素的哪一部分。区域内的部分显示，区域外的隐藏。
4.如何在我的背景图像上添加渐变叠加、
想在图像上放置一些文本但背景太浅文本显示不清晰时，它会很有用，同时它也可以改善图像本身
body {
background-image:
linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center
}
5.如何制作网格背景图片
使用CSS网格和CSS背景图像创建一个不错的背景图像