今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近,由近到远一种飞跃效果。效果非常好看,我们一起看下效果图: 在线预览 源码下载 我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。html代码:<div class="container" style="opacity: 0.55; -webkit-perspective: 50px;"><div st...
之前做项目的时候,用opacity属性,但是这个属性用后,不但背景会半透明,背景上的文字也会变成半透明。显然用opacity属性实现这个效果是不可取的。在css3中我们可以用 background-color:rgba(); 来实现,rgb是背景要显示的颜色,a则是背景的透明度,从而实现我们想要的效果。本人亲自做过实验,希望可以帮到大家,谢谢。。 原文:http://www.cnblogs.com/bjwhite/p/6385904.html
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是在此总结了下二者的区别:1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。附:在一个单纯由Html和Css组成的页面中,...
CSS3入门之边框与背景*:first-child {margin-top: 0 !important;
}body>*:last-child {margin-bottom: 0 !important;
}/* BLOCKS
=============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0;
}/* HEADERS
=============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0...
知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。css代码: <style>*{margin:0;padding:0;}body#wrap{width:100%;height:500px;
}</style>JavaScript代码: <script>function convert(sRgb){ /*rgb转换成HEX*/var sRgb=sRgb;var sHex=sRgb.toString(16);sHex=sHex.length<2?‘0‘+sHex:sHex /* 三目判断 判断条件 ? 符合条件 :不符合条件*/return...
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章。把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大。解决方法:width:100%;min-width:990px;在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度。Ps:逐风个人认为上诉的解决方案还不够人性化,想要实现不同分辨率下灵活覆盖...
### 六 背景1 背景颜色:background-color2 背景图片:background-image:url(图片路径)---双引号可加可不加3 背景图片平铺:background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y4 背景图片定位:background-position:①px(v1-一起设置x,y轴;v1 v2 分别设置x轴y轴);②% 以高度为标准,也分x轴y轴;③关键字:x轴(left/center/right)y轴(top/center/bottom)5 背景图片的尺寸:background-size:①v1 同时设置x,y轴,v...
这一次简单介绍下CSS的背景设置和文本样式设置(这一次写的风格可能和之前有所不同,主要是之前一篇随笔包括的内容有点多,杂,所以这次单独介绍某一个知识点,简约点,所以你会发现没有Part几) 下文部分图片截至https://www.bilibili.com/video/BV1Mx411m7fd?p=48(黑字正文,绿字说明)CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的结果一些与背景相关的属性及其描述属性描述backgroung-attachment背景图像是否固...
4. 背景布局(1)background基本语法background : background-color || background-image || background-repeat || background-attachment || background-position 语法取值该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。使用说明设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:设置 background : white 等...
css 背景图片平铺background:url(../Images/VinnoImages/rightpanel.jpg);filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘scale‘)";-moz-background-size:100% 100%;background-size:100% 100%;原文:http://www.cnblogs.com/llwbxzg/p/4671177.html
美国YAHOO在页面制作中所用到的图片整合技术,这样做虽然需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。 实现方法: 首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px; 浅谈CSS Sprites技术以及图片优化〔背景图整合〕关于CSS Sprites技术的优化我们能做到多少,能减...
网页背景渐变是经常用到的效果,下面用的滤镜,当然在非IE下是没效果的。一、从上往下渐变body{FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)";} 二、从左上至右下渐变body{ FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); }background-color: skyblue;}三、从左往右渐变body{FILTER: progid: DXImageT...
CSS 背景属性属性描述background简写属性,作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。CSS 文本属性属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符...
CSS背景颜色设置background-color:red;如设置背景颜色为红色;背景颜色设置支持3种写法:颜色名16进制rgbCSS背景图片颜色设置background-image:url(图片地址);如设置背景图片路径不在说明了!CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat)background-repeat:repeat-x;如设置x轴平铺;background-repeat:no-repeat如设置不平铺;CSS背景图片定位设置background-position:right top;CSS背景图片固定:标...
IE6和部分IE7内核的浏览器会读懂rgbaIE专属滤镜 filter:Alpha的兼容处理背景透明,文字不透明全兼容方案测试浏览器:VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0如何实现背景透明,文字不透明,兼容所有浏览器?我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例:打开ps,在图层面板上,可...