【实现div毛玻璃背景】的更多相关文章

实现div毛玻璃背景

毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 CSS3 Filter CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:   1.grayscale灰度   2.sepia褐色   3.saturate饱和度   4.hue-rotate色相旋转   5.invert反色   6.opacity透明度   7.brightness亮度   8.contrast对比度   9.blur模糊   10.drop-shadow阴影…

滚动时div的背景图片随之滚动

在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-position来实现的,实现原理为当目标DIV出现在屏幕上时,当往下滚动时background-position的Y越来越小,反之则越大. 准备好一张大图,先写出布局 <style> .wrap{width: 100%;height: 3000px;} .wrap_bg{background: url…

CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-attachment: 的fix来实现背景图片的填充,但是,貌似是不能按照当前的DIV大小去填充. 我的情况是,宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,而也想通过宽度的百分比,即宽高比希望与背景图片的宽高比相等. 通过一下属性,先填充 background-siz…

div+css背景渐变色代码示例

用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器. 从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm 代码: <style type="text/css"> .jbkeleyi{ height: 300px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, #F00, #000); background-ima…

CSS实现DIV层背景透明而文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就 需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV…

给div加上背景图片

<div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');background-size:100%;height:600px;">…

div css背景图片不显示

我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css.img.js三个文件夹(各自存放css样式表.img图片.js文件),图片a.png在css背景图片的路径应为:../img/a.png,而不是相对于index.html文件的路径img/a.png. 即:背景图片的相对路径写在哪里,就相对于谁来计算路径.…

鼠标点击DIV后，DIV的背景变色（js）

<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs = document.getElementsByTagName("div"); var len = divs.length; for(var i=0;i<len;i++){ divs[i].onclick = function(){ for(var j=0;j<len;j++)…

利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div+css+js实现九宫格点击随机变色</title> <script> var inner = document.getElementsByClassName("inner"); function ChangeColor…

【CSS】div的背景图完整图片覆盖

最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: cover; position: relative; } 因为UI交给我的图片是按照iPhone6的尺寸来的,在iPhone4上面用cover的话覆盖的背景图是不完整的下面缺失 更改后的代码: .container_first { width: 100%; height: 100%; backgr…