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对行间距设置可以怎样做，方法是什么

  css设置行间距的方法：1、使用数值来设置行间距，是拥有标准行高的段落。 默认行高大约是1。2、使用百分比设置行间距，line-height属性指定了一个百分数，则会相对于字体去计算行高。

• 用CSS如何实现文字下虚线，代码是什么

  css中，可利用“border-bottom”属性设置下虚线样式，该属性用于设置元素的下边框样式，只需将样式值设置为“dashed”，即可实现虚线下边框效果；语法为“元素{border-bottom:虚线粗细值 dashed 颜色值;}”。

• CSS中实现两边向中间背景渐变的方法是什么

  css中，可利用“background-image”属性和“linear-gradient()”函数来设置背景向两个方向渐变，语法为“元素{background-image:linear-gradient(方向,颜色1,颜色2,颜色3}”。

• 如何用HTML+jQuery实现鼠标悬浮展现列表切换

  效果截图HTML结构为：<divclass="activityBox"><ulclass="activityTab"><listyle="MARGIN-RIGHT:3px">折扣专区</li><listyle="MA

• 用css3怎样做背景图变半透明内容不透明的效果？

  这篇文章给大家分享的是用css3实现背景图变半透明内容不透明的效果。小编觉得挺实用的，因此分享给大家做个参考，实现效果如下，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。