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，在图层面板上，可...
刚开始出现的错误，内容会受到背景透明度改变的影响：如图：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width:300px;height: 300px;margin: 50px auto;line-height: 300px;text-align: center;background: red;color: #000;font-size: 30px;-webkit-opacity: 0.2;}</style></head><body><div class=“wrap”>我爱夏天</div></body></html>解决方法一： 在div.wrap内...
Html&Css07：背景html==>结构css ==>表现js ==>行为1、背景颜色&背景图片&重复方式&位置<style>.box1{width: 500px;height: 500px;/* background-color 设置背景颜色*/background-color: #bfa;/* background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满- 如果背景的图片大于元素，将会一个部分背景无法完全显...
具体代码如下 button{position: relative; } button:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 5%) } 如果是自定义DIV也是可以用同样方法的，可以改为 .btn{position: relative;}/**这里的active为选中的状态，可以根据情况修改**/.btn:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;widt...