CSS怎样实现网页背景渐变并自适应全屏效果
Admin 2022-06-01 群英技术资讯 879 次浏览
CSS 关于背景渐变和自动全屏的问题
主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖
但按下了F11的时候崩溃的世界开始了 ,所以这篇文章主要介绍CSS背景渐变色和自动全屏适应
背景渐变色
本文只介绍线性渐变
背景渐变相信大家也都不陌生先看下图
小编配的这个色也还可以哈 代码如下
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; } //小编测试了谷歌浏览器和星愿浏览器 都是可以自动适配的 //大家可以带回去多做实验
效果图如下:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但是一直表单无法居中,在网上找了各种例子之后,终于成功,今天就来介绍一下,感兴趣的可以了解一下
做一个星级评价的功能不是很难,但是要单纯用CSS写估计就有点难度了,先来个截图:效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:
这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
这篇文章主要介绍了CSS 阴影动画优化技巧,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
text-indent属性规定文本块中首行文本的缩进。注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。注意:在CSS2.1之前,text-indent总是继承计算值,而不是声明值。将段落的第一行缩进50像素:代码如下复制代码p{text-indent:50px;}text-indent:2em定义了文本缩进2em,em是相对长度单位,在这里你设置的字体大小有 ...
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008