您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

CSS3实现元素背景的知识总结
发表:紫石头原创模板堂    发表时间:2019-05-29 09:44:47    阅读:65
    四种背景属性:
    background-image:添加背景图片。不同的背景图像和图像用逗号隔开。
    background-size:指定背景图像的大小,可指定像素或者百分比的大小,是相对于父元素的宽度和高度的百分比的大小。
    background-origin:指定了背景图像的位置区域
    background-clip:背景裁剪属性是从指定位置开始绘制。
    CSS3渐变
    渐变可以让我们在两个或者多个颜色之间显示平稳的过渡。
    两种类型的渐变:
    Linear Gradients:线性渐变-向下/向上/向左/向右/对角方向
    Radial Gradients:径向渐变,由它们的中心定义
    线性渐变:
    语法:background:linear-gradient(direction, color-stop1, color-stop2, …);
    线性渐变默认情况是从上到下。
    从左到右的线性渐变:
    #grad {
    background: -webkit-linear-gradient(left, red, blue);
    background: -o-liner-gradient(right, red, blue);
    background: -moz-linear-gradient(right, red, blue);
    background: linear-gradient(to right, red, blue);/*标准语法*/
    }
    从左上角开始到右下角的渐变:
    设置方向为:left top/bottom right/to bottom right(标准语法下)
    使用角度对方向进行设置:
    这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。
    使用透明度:
    支持透明度,用于创建减弱变淡的效果。
    为了添加透明度,使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值,它定义了颜色的透明度:0表示完全透明,1表示完全不透明。
    重复的线性渐变:
    repeating-linear-gradient()函数用于重复的线性渐变。
    径向渐变:
    我们可以指定渐变的中心、形状(圆形或者椭圆形)、大小,默认情况下,渐变的中心是center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)。
    语法: background: radial-gradient(center, shape size, start-color, …, last-color);
    颜色结点分布不均匀的径向渐变:
    #grad{
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
    }
    Size参数定义了渐变的大小,可以是以下四个值:
    closest-side/farthest-side/closest-corner/farthest-corner
    重复的径向渐变:
    Reperting-radial-gradient()函数用于重复径向渐变。
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照