zoukankan      html  css  js  c++  java
  • CSS3 background 背景 和 CSS 颜色 详解

    background-image:设置或检索对象的背景图像
    
    
    background-repeat:设置或检索对象的背景图像如何铺排填充
    
    
    background-attachment:设置或检索对象的背景图像是随对象内容滚动
    还是固定的
    
    
    background-origin:设置或检索对象的背景图像显示的原点
    
    
    background-clip:检索或设置对象的背景向外裁剪的区域
    
    
    background-size:检索或设置对象的背景图像的尺寸大小
    
    
    Multiple background:检索或设置对象的多重背景图像
    
    
    Css3 background 渐变

    1.CSS3渐变

    CSS3渐变类型 CSS3渐变共有2种:(1)线性渐变(linear-gradient); (2)径向渐变(radial-gradient)。

    1、线性渐变 线性渐变,指的就是指在一条直线上进行渐变,在网页中 大多数渐变效果都是线性渐变。

    2、径向渐变 径向渐变,是一种从起点到终点颜色从内到外进行圆形渐 变(从中间向外拉,像圆一样)。

    一、线性渐变简介

    在CSS3中,线性渐变指的是一条直线上进行的渐变。在网页中,大多数渐变效果都是线性渐变。
    语法:

    background:linear-gradient(方向,开始颜色,结束颜色);

    说明:
    线性渐变的方向取值有2种,一种是使用角度(deg),另外一种是使用关键字:

     第2个参数和第3个参数,表示开始颜色和结束颜色,取值可以为关键字、十六进制颜色值、RGBA颜色等。

    例1:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3线性渐变</title>
    <style type="text/css">
    div
    {
    width:200px;
    height:150px;
    background:linear-gradient(to right,blue,yellow);
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    View Code

     分析: “background:linear-gradient(to right,blue,yellow);” 表示线性渐变方向为“从左到右”,开始颜色为蓝色( blue),结束颜色为黄色(yellow)。

    如果使用“background:linear-gradient(to left,blue,yellow);”,在浏览器预览效果如下:

     二、径向渐变简介:

    CSS3径向渐变是圆 形或椭圆形渐变,颜色不再沿着一条直线渐变,而是从一个起点向所有方向渐变。

    语法: background:radial-gradient(position ,shape size,start-color,stop-color)

    说明:
    position:定义圆心位置;
    shape size:由2个参数组成,shape定义形状(圆形或椭圆),size定义大小;
    start-color:定义开始颜色值;
    stop-color:定义结束颜色值;

    position、shape size都是可选参数,如果省略,则表示该项参数采用默认值。大家要非常清楚这一点,不然这一节 的代码你有可能看不懂。

    start-color和stop-color为必选参数,并且径向渐变可以有多个颜色值。

    定义圆心位置position ;

    position用于定义径向渐变的圆心位置,属性值跟background-position属性值相似,也有2种情况:

    (1)长 度值,如px、em或百分比等;(2)关键字。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3径向渐变</title>
    <style type="text/css">
    /*设置div公共样式*/
    div
    {
    width:200px;
    height:150px;
    line-height:150px;
    text-align:center;
    color:white;
    }
    #div1
    {
    margin-bottom:10px;
    background:-webkit-radial-gradient(orange,blue);
    }
    #div2
    {
    background:-webkit-radial-gradient(circle,orange,blue);
    }
    </style>
    </head>
    <body>
    <div id="div1">默认值(ellipse)</div>
    <div id="div2">circle</div>
    </body>
    </html>
    shape参数取值  例子

     

     定义大小size:size主要用于定义径向渐变的结束形状大小。

                 

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3径向渐变</title>
    <style type="text/css">
    /*设置div公共样式*/
    div
    {
    width:120px;
    height:80px;
    line-height:80px;
    text-align:center;
    color:white;
    }
    div+div
    {
    margin-top:10px;
    }
    #div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
    #div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
    #div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
    #div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
    </style>
    </head>
    <body>
    <div id="div1">closest-side</div>
    <div id="div2">closest-corner</div>
    <div id="div3">farthest-side</div>
    <div id="div4">farthest-corner
    </div>
    </body>
    </html>
    定义大小size 例子

     开始颜色start-color和结束颜色stop-color

     参数start-color用于定义开始颜色,参数stop-color用于定义结束颜色。

    颜色可以为关键词、十六进制颜色值、 RGBA颜色值等。 径向渐变也接受一个颜色值列表,用于同时定义多种颜色的径向渐变。

    <!DOCTYPE html>
    <html
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3径向渐变</title>
    <style type="text/css">
    div
    {
    width:200px;
    height:150px;
    background:-webkit-radialgradient(red,orange,yellow,green,blue);
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    开始颜色start-color和结束颜色stop-color
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3径向渐变</title>
    <style type="text/css">
    div
    {
    width:200px;
    height:150px;
    line-height:150px;
    text-align:center;
    color:white;
    }
    #div1{background:-webkit-radial-gradient(red,green,blue);marginbottom:10px;}
    #div2{background:-webkit-radial-gradient(red 5%,green 30%,blue
    60%);}
    </style>
    </head>
    <body>
    <div id="div1">颜色均匀分布</div>
    <div id="div2">颜色不均匀分布</div>
    </body>
    </html>
    颜色均匀


    2.响应式背景图片

    1.background-size(对响应性图片等比例缩放)    background-size: 可以设定背景图像的尺寸

    基本语法:background-size: length | percentage | cover | contain;

    一:length
    该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设
    置第一个值,那么第二个值会自动转换为 “auto”;
    二:percentage
    该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度
    如果只设置一个值,那么第二个值会被设置为 “auto”;
    三:cover
    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
    四:contain
    把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域

    在CSS3之前,背景图片的大小是由图片的实际大小决定的。 在CSS3中,我们可以使用background-size属性来设置背景图片的大小,这使得我们可以在不同的环境中 重复使用背景图片

    语法: background-size:取值;

    说明: background-size取值共有2种,一种是使用长度值(如px、百分比);  另外一种是使用关键字。 background-size关键字取值如下表:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS3 background-size属性</title>
    <style type="text/css">
    div
    {
    width:160px;
    height:100px;
    border:1px solid red;
    margin-bottom:10px;
    background-image:url("../App_images/lesson/run_css3/css3.png");
    background-repeat:no-repeat;
    }
    #div2{background-size:cover;}
    #div3{background-size:contain;}
    </style>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    </body>
    </html>
    例1!

      当属性 background-size的值为cover时,背景图像按比例缩放, 直到覆盖整个背景区域为止,但可能会裁剪掉部分图像。 当属性background-size的值为contain时,背景图像会完 全显示出来,但可能不会完全覆盖背景区域。

    对比:

    cover 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    比对测试连接:http://wow.techbrood.com/fiddle/37279

    2.背景定位:background-origin

    在CSS3中,我们可以使用background-origin属性来设置元素背景图片平铺的最开始位置。
    语法:
    background-origin:属性值;
    说明:
    background-origin属性取值如下:

    测试连接:http://wow.techbrood.com/fiddle/39847

    3.背景剪切:background-clip

    在CSS3中,使用background-clip属性来将背景图片根据实际需要进行剪切。
    语法:
    background-clip:属性值;
    说明:
    background-clip属性取值如下表:

    测试连接:http://wow.techbrood.com/fiddle/39848

    4.background-position

    设置背景图像的起始位置。

    这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

    提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

    这是取值  其实就2个  一个x  一个 y。

     

     

     

     

    多图背景:background

     

     多图背景测试例子:http://wow.techbrood.com/fiddle/37659


     

     

    3. CSS颜色

    一、opacity属性 在CSS3中,我们可以使用opacity属性来控制元素的透明度。

    语法: opacity:数值;

    说明: opacity属性取值范围为0.0~1.0,0.0表示完全透明,1.0 表示完全不透明(默认值)。

    opacity属性取值不可以为负数。

    透明度opacity属性用得也比较广泛,很多时候都是配合 :hover伪类来定义鼠标移动到某个按钮或图片上时,改变 透明度来呈现动态的效果。

    二、RGBA颜色

    语法: rgba(R,G,B,A)

    参数A为透明度,类似opacity属性,取值范围在0.0~1.0之间,不可为负值。下面是RGBA颜色 的正确用法:

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15507156.html

  • 相关阅读:
    Representation Data in OpenCascade BRep
    Render OpenCascade Geometry Surfaces in OpenSceneGraph
    Render OpenCascade Geometry Curves in OpenSceneGraph
    OpenCascade Shape Representation in OpenSceneGraph
    Geometry Surface of OpenCascade BRep
    Geometry Curve of OpenCascade BRep
    Tyvj2017清北冬令营入学测试
    Spfa算法模板
    洛谷1016 旅行家的预算
    洛谷1290 欧几里得的游戏
  • 原文地址:https://www.cnblogs.com/bi-hu/p/15507156.html
Copyright © 2011-2022 走看看