CSS如何实现网页背景渐变并自适应全屏效果

发布时间：2023-09-21 14:33:30 所属栏目：语言来源：

导读：配的这个色也还可以哈代码如下

body{

background-image:

-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));

//60deg代表渐变色的角度大家可以

配的这个色也还可以哈代码如下

body{

    background-image:

    -webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));

    //60deg代表渐变色的角度大家可以自己试试看

    //渐变色便是后面两个配色的结果当然也可以设置第三个

}

背景全屏

上面大家也看到了渐变背景没有全屏这样也是很影响美观了

但这时候肯定有人说小编你没设置宽高啊好那我们就来一个宽高看看效果

body{

    background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));

    min-height:648px;

}

那么问题来了当我按下F11最大化窗口的时候：

显然问题并没有彻底解决那么下面为各位奉上自适应屏幕代码

body{

    background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904));

    background-position: center 0;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    -moz-background-size: cover;

    -ms-background-size: cover;

}

//小编测试了谷歌浏览器和星愿浏览器都是可以自动适配的

//大家可以带回去多做实验

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!