如何利用css3设置独特背景

本文将介绍如何将多样化的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;    }}

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

关键字：css, css3, 图片, 属性

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！