千家信息网

css如何制作网格背景图片

发表于:2025-01-20 作者:千家信息网编辑
千家信息网最后更新 2025年01月20日,这篇文章主要介绍css如何制作网格背景图片,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如何制作网格背景图片使用CSS网格和CSS背景图像创建一个不错的背景图像
千家信息网最后更新 2025年01月20日css如何制作网格背景图片

这篇文章主要介绍css如何制作网格背景图片,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

如何制作网格背景图片

使用CSS网格和CSS背景图像创建一个不错的背景图像

body { margin: 0;  padding: 0;}.container {  position: absolute;  width: 100%;  height: 100%;  background: black;  display: grid;  grid-template-columns: 25fr 30fr 40fr 15fr;  grid-template-rows: 20fr 45fr 5fr 30fr;  grid-gap: 20px;  .item_img {    background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');    background-repeat: no-repeat;    background-position: center;    background-attachment: fixed;    background-size: cover;  }}

以上是"css如何制作网格背景图片"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

0