介绍 body {
,,背景图片:url (& # 39; https://images.unsplash.com/photo - 1573480813647 - 552 - e9b7b5394?ixlib=rb 1.2.1& ixid=eyJhcHBfaWQiOjEyMDd9&汽车=format&适合=crop& w=2253, q=80 & # 39;);
平铺方式:,才能不再重演;
,,背景位置:中心;
,,background-attachment:固定;
background-size才能:封面;
-webkit-background-size才能:封面;
-moz-background-size才能:封面;
-o-background-size才能:封面;
} body {
,,背景图片:url (https://image.flaticon.com/icons/svg/748/748122.svg), url (https://images.unsplash.com/photo - 1478719059408 - 592965723 - cbc?ixlib=rb 1.2.1&汽车=format&适合=crop& w=2212, q=80);
,,背景位置:中心,最高;
,,平铺方式:重复,,不再重演;
background-size才能:包含,封面;
} & lt; body>
& lt;才能div 类=癲ay"祝辞& lt;/div>
& lt;才能div 类=皀ight"祝辞& lt;/div>
& lt;/body>
body {
保证金才能:0;
,,填充:0;
}
div {
位置:才能,绝对;
,,身高:100 vh;
,,宽度:100大众;
}
.day {
,,背景图片:url (“https://images.unsplash.com/photo - 1477959858617 - 67 - f85cf4f1df?ixlib=rb 1.2.1& ixid=eyJhcHBfaWQiOjEyMDd9&汽车=format&适合=crop& w=2613, q=80“);
background-size才能:封面;
平铺方式:,才能不再重演;
}
.night {
,,背景图片:url (“https://images.unsplash.com/photo - 1493540447904 - 49763 - eecf55f?ixlib=rb 1.2.1& ixid=eyJhcHBfaWQiOjEyMDd9&汽车=format&适合=crop& w=2250, q=80“);
background-size才能:封面;
平铺方式:,才能不再重演;
,,clip-path:多边形(100 vw 0, 0%, 0 vh, 100 vw 100 vh);
} body {
,,背景图片:
,,,线性渐变(4度,rgba(38岁,8日31日0.75),30%,rgba (213、49127、0.3), 45%, rgba (232120、12、0.3), 100%),
,,,url (“https://images.unsplash.com/photo - 1503803548695 - c2a7b4a5b875?ixlib=rb 1.2.1&汽车=format&适合=crop& w=2250, q=80“);
background-size才能:封面;
平铺方式:,才能不再重演;
,,background-attachment:固定;
,,背景位置:中心
} & lt; body>
& lt; div 类=癱ontainer"祝辞
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;才能div 类=癷tem_img"祝辞& lt;/div>
& lt;才能div 类=癷tem"祝辞& lt;/div>
& lt;/div>
& lt;/body>
这篇文章将为大家详细讲解有关6个CSS背景图片设置的方法技巧,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强> 1。如何将背景图像完美地适合视口
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
<强> 2。如何在CSS中使用多个背景图片
<强> 3。如何创建三角背景图像
当我们想展示某些完全不同的选择(例如白天和黑夜或冬天和夏天)时。
这是通过为整个视口创建两个div来完成的,然后需要向它们两个都添加背景图像,然后,第二个div需要一个clip-path属性才能创建三角形。
<代码> clip-path 属性创建一个裁剪区域,该区域设置应显示元素的哪一部分。区域内的部分显示,区域外的隐藏。
<强> 4。如何在我的背景图像上添加渐变叠加,
想在图像上放置一些文本但背景太浅文本显示不清晰时,它会很有用,同时它也可以改善图像本身
<强> 5。如何制作网格背景图片
使用CSS网格和CSS背景图像创建一个不错的背景图像
