CSS3 Gradient 分为 linear-gradient（线性渐变） 和 radial-gradient（径向渐变）。记住渐变并不是CSS3的一个属性，而是一个属性的值，虽然在CSS3中没有专门注明渐变是针对background的，但是目前我所了解到的是只有background才会应用渐变属性（background-image也可以）。 我们先直接通过两个实例来说明这两种渐变的基本用法：分享一个最好用的UI前端框架！ 线性渐变linear-gradient： .代码 b...
动态背景 利用多层背景的交替淡入淡出，实现一种背景在不停变换的效果，先看图。 效果图： DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景。其中的80% 20%为渐变中心的x,y位置。 具体的radial-gradient用法可以参见这里 .dynbg__bg{ position: absolute; top: 0px; left: 0px; width:100%; height:100%; background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123...
技术的新发展，除计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度？不知道如何上手，只懂一点基础的CSS语法，在移动互联时代，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！ 5.1 设定背景图的大小 在CSS 3出现之前，背景图片的...
CSS 3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中书写的顺序来定，最先写的背景在最上层，每层图片定义使用英文逗号隔开。 例如下面的代码： background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat; 根据代码可...
相比传统的图片背景来说，使用CSS构造背景色不仅可以降低网络传输的开销，更由于其尺寸的可控性受到开发者的青睐。 如设计师设计了一张背景图片作为标题背景，如图5.18所示。对于用电脑浏览网页的用户来说，标题基本不存在折行现象，布局也基本是固定宽度的，因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示，标题根据长度不同可能占1行，也可能占3行，如果采用图片就必须根据不同的情况放不同的背景图，实现...
这是一款非常实用的 CSS3网页固定背景 视觉差特效插件。该固定背景特效可以在页面中固定某些元素，在页面滚动的时候可以修改这些元素的视觉效果，从而制作出一种滚动视觉差的特效。 该固定背景视觉差特效的效果都是使用CSS3来完成的，jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment属性来实现。在例子中，使用一幅手机的图片作为固定位置元素，在页面滚动时，除了它所有的页面元素都在...
css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。 一、线性渐变linear-gradient linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色]，[设置结束颜色]) 参数： 第一个参数：指定渐变方向，可以用“角度”的关键字或“英文”来表示： 第一个参数默认：180deg，等同于“to bottom”。 后面的颜色至少有2个，即开始颜色和结束颜色。 举例： p{ width: 300px; height: 100p...
最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机浏览器查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。 我们都知道标签可以通过固定宽高的方式来压缩大图，从而得到高清的显示效果，而图标一般用背景图来呈现，怎么搞呢？好吧，css3出了一个很牛逼的属性background-size可以直接设置背...
废话当然不说了。直接上代码 #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; background-repeat:no-repeat; border-radius: 4px; border: 1px solid #ccc; width: 400px; height: 400px; } 原来背景图大小：970*630 这里才是战场,以缩略图的形式来将背景图设置 background-size:400px 400px;后面是设置缩略图宽和高。 效果如图：
CSS3 background-origin 可以将图片定位于：padding 或者padding里头，甚至是边框。 所以他有三个值：content-box、padding-box 或 border-box content-box border-box padding-box 自习去发现 boder-box 和padding-box 是有却别的
CSS3感应鼠标的背景闪烁和图片缩放动态效果/*标题背景*/h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}h2:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}h2,a{cursor:pointer;margin:10px auto;}@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}25%{background:rgba(144,24,53,0.5);}50%{background:rg...
与背景相关的新增属性 大家都知道在HTML页面中，元素都是由以下几部分组成 使用background-clip来修改背景的显示范围，如果设定为border-box，则背景范围包含边框区域，如果设定为padding-box则不包含边框,包含padding区域。如果设定为content-box则背景只包含内容区域 background-origin属性：指定绘制背景图像的绘制起点，它的属性值跟background-clip是一样的，也就是说你可以通过它的指定绘制时从边框的左上角开始...
*{ margin:0; padding:0;} .kech{ background-image: url() ;background-size:100% auto;background-repeat: no-repeat; width:100%;} .kech:before{content: ""; display: block; padding-top: 100%;} .kech1 img{ width:100%;} 我在网上找的，用：before，padding-top:100%;但是不对，就是想要kech跟kech1里的效果一样，当宽设置为100%时，背景等比例拉伸，就像把图片宽设置100%，高度自适应一样的效果 回...
css3 背景 css背景主要包括五个属性： background-color background-color:transparent || 用来设置元素的背景颜色，默认值为transparent(透明)，可用颜色名，RGB色，hls值，十六进制值指定颜色。 background-image background-image:none || 用来设置元素的背景图片，默认值为none，可以用相对地址，也可以用绝对地址。 background-repeat background-repeat:repeat || repeat-x || repeat-y...
在没有了解css也可以做背景渐变以前，我都是通过PS一张背景渐变的图片来应用到自己所做的网页中。然而，在前不久我了解到css3也可以做背景渐变后，想要做背景渐变的效果就很容易了许多，下面是一些css3做背景渐变的方法。 一.线性渐变 //自上而下的线性渐变div{width:400px;height:100px;padding:5px;border:1px solid #ccc;background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/background:-moz-l...