pc端和移动端背景图全屏自适应大小写法

最新推荐文章于 2024-07-25 09:05:20 发布

weixin_46276411

最新推荐文章于 2024-07-25 09:05:20 发布

阅读量812

点赞数

文章标签： css3 javascript css

本文链接：https://blog.csdn.net/weixin_46276411/article/details/120948070

版权

本文展示了如何使用CSS实现网页背景图片全屏显示，包括设置`background-image`，`background-repeat`，`background-size`等属性，以及通过`<div>`标签创建内容容器。同时，代码中提及了在不同场景下的背景图片应用和布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
	  html,
        body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
        }

        .box {
                width: 100%;
                height: 100%;
                background-image: url('./1.jpg');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin: 0;
                padding: 0;
        }
</style>
<body>
        <div class="box">
             
        </div>
</body>

<view class="container">
   
</view>
page {
  width: 100%;
  height: 100%;
}
.container{
    display: flex;
  	width: 100vw;
    height: 100vh;
    background-image: url('https://img-blog.csdnimg.cn/01f9ae5fe44e464e97c40b191c99eb66.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2VpeGluXzQ2Mjc2NDEx,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center');
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}