如何利用css3设置独特背景

Scorpion 发布于2019-08-30 13:05 / 1257人阅读

摘要：本文将介绍如何将多样化的属性设置一幅属于你自己的独一无二的背景图片利用进行背景图片设置时，发现可提供的属性也就那么几个，而大量的属性又不能直接使用在背景图片上，其中主要就是滤镜中强大的对图片的装饰方法，所以今天就和大家分享如何对背景图片进行

本文将介绍如何将多样化的css3属性设置一幅属于你自己的独一无二的背景图片

利用css进行背景图片设置时，发现可提供的属性也就那么几个，而大量的css3属性又不能直接使用在背景图片上，其中主要就是filter滤镜中强大的对图片的装饰方法，所以今天就和大家分享如何对背景图片进行独一无二的装点

阶段一: 单纯使用css3修饰图片

html:

css:

*{
    margin: 0  
}

body.html{
    height:  100%
}

#decoration {
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-image: url("../ima.jpg");
    filter: brightness(.7);
    //more 
}

注: 其中第一项的height：100%是必须的

原理就是使用fixed将一张图片放入一个块元素里，再调整大小使其大小适应body成为"真正的background"，此时图片会完全覆盖整个页面，且不会产生滚动(scroll)，之后，就可以使用css3属性修改图片了

阶段二: 利用js动态更改图片样式

javascript:

window.onscroll = function(){
    if(window.pageXOffset > 0) {
        var opa = (window.pageXOffset / 80);
        document.getElementById("#decoration").style.opacity = 1-kk;
    }
}

此方法可以实现滚轮滚动时，动态改变图片的透明度，配合文字及其他样式显示，效果相当不错

服务器托管云服务器设置背景设置背景图设置背景圆角 python设置背景

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115295.html

可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

hlcc 2019-08-02 11:43 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Meils 2019-08-23 12:20 评论0 收藏0