zoukankan html css js c++ java

慕课前端入门-CSS背景与渐变

1.CSS背景

1.1.CSS背景图像区域

background-clip属性：指定背景绘制区域

border-box:边框盒子。从边框开始绘制，边框之外会被裁剪
padding-box:内边距盒子。从内边距开始绘制，padding之外会被裁剪
content-box:内容盒子。从内容开始绘制，content之外会被裁剪

示例代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0;padding:0;border: none;}
		div{
			 800px;
			height: 400px;
			padding:50px;
			border:50px solid transparent;
			background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat center center;
			/*background-clip: border-box;*/
			background-clip: padding-box;
			/*background-clip: content-box;*/

	}
	span.div_border{
		position: absolute;
		top:0;
		left: 0;
		 800px;
		height: 400px;
		padding:50px;
		border:50px solid red;
		opacity: 0.5;
	}
	span.div_padding{
		position: absolute;
		top:50px;
		left:50px;
		 800px;
		height: 400px;
		border:50px solid green;
		opacity: 0.5;
	}
	</style>	
</head>
<body>
<div></div>
<span class="div_border"></span>	
<span class="div_padding"></span>
</body>
</html>

示例2:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background-clip</title>
    <style type="text/css">
        .border,.padding,.content{/*给最外层的div设置样式*/
            300px;height:300px;
            float:left;margin-left:50px;
        }
        a{
            text-decoration:none;
            font-size:30px;
        }
        .div1,.div2,.div3{/*放置背景图片的div样式*/
            220px;height:200px;
            border:10px solid rgba(0,255,0,0.3);
            padding:50px; 
            background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");
            margin-top:50px;
            display: none;
        }
        .border:hover div,.padding:hover div,.content:hover div{
            display:block;
        }
        /*补充代码*/
        .div1{background-clip: border-box;}
        .div2{background-clip: padding-box;}
        .div3{background-clip: content-box;}
    </style>
</head>
<body>
    <div class="border">
        <a href="">border-box</a>                   
        <div class="div1"></div>            
    </div>
    <div class="padding">
        <a href="">padding-box</a>
        <div class="div2"></div>
    </div>
    <div class="content">
        <a href="">content-box</a>             
        <div class="div3"></div>
    </div>
</body>
</html>

1.2.CSS背景图像定位

background-origin属性：设置元素背景片的原始起始位置，偏移量在background中设置。

border-box:边框盒子。以边框开始位置作为原点
padding-box:内边距盒子。以内边距开始位置作为原点
content-box:内容盒子。以内容开始位置作为原点

示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin: 0;padding:0;border: none;}
        div{
             800px;
            height: 400px;
            padding:50px;
            border:50px solid transparent;
            background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat 50px 100px;
            /*background-origin: border-box;*/
            /*background-origin: padding-box;*/
            background-origin: content-box;

    }
    span.div_border{
        position: absolute;
        top:0;
        left: 0;
         800px;
        height: 400px;
        padding:50px;
        border:50px solid red;
        opacity: 0.5;
    }
    span.div_padding{
        position: absolute;
        top:50px;
        left:50px;
         800px;
        height: 400px;
        border:50px solid green;
        opacity: 0.5;
    }
    </style>    
</head>
<body>
<div></div>
<span class="div_border"></span>    
<span class="div_padding"></span>
</body>
</html>

作业

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>background-origin</title>
        <style type="text/css">
            div{
                 400px;
                height: 150px;
                padding:10px;
                border:10px solid #acacac;
                background:url("http://climg.mukewang.com/582c342b0001fd6507000210.jpg") no-repeat center center;
                background-origin:padding-box;
            }
            div:hover{
                background:url("http://climg.mukewang.com/582c34220001091605000150.jpg") no-repeat 10px 10px;
                background-origin: content-box;
            }
        </style>
    </head>
    <body>
    <div></div>


    </body>
</html>

1.3.CSS背景图像大小

background-size属性：指定背景图片大小

具体数值
百分比
cover 即将图片等比例缩放以填满整个容器，长和宽至少有一个为100%，另一个可能会超出，超出的部分会被裁剪。
contain 即将背景图片等比例缩放至某一边紧贴容器边缘位置。长或宽至少有一个为100%，另一个可能会留白

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background-size</title>
    <style type="text/css">
        a{text-decoration:none;}
        ul{list-style:none;}
        div{
            background-image:url("http://climg.mukewang.com/582c37e50001b08102000065.jpg");
            100px;height:100px;
            display:none;border:2px solid red;
            background-repeat:no-repeat;
        }          
        /*补充代码*/
        .length:hover div{
            display: block;
            background-size:100px 100px;
        }
        .percent:hover div{
            display: block;
            background-size:50% 50%;
        }
        .cover:hover div{
            display: block;
            background-size:cover;
        }
        .contain:hover div{
            display: block;
            background-size:contain;
        }
    </style>
</head>
<body>
    <h2>background-size不同属性值不同效果</h2>
    <ul>
        <li  class="length">
            <h3><a href="">100px 100px</a></h3>
            <div></div>
        </li> 
        <li  class="percent">
            <h3><a href="">50% 50%</a></h3>
            <div></div>
        </li> 
        <li  class="cover">
            <h3><a href="">cover</a></h3>
            <div></div>
        </li> 
        <li  class="contain">
            <h3><a href="">contain</a></h3>
            <div></div>
        </li> 
    </ul>
</body>
</html>

1.4.CSS多重背景图像

background-image:url(), url();前面的图像会覆盖后面的图像

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
             800px;
            height: 500px;
            background:no-repeat center center;
            background-image: url("water.png"),url("wechat.jpeg");
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        /*此处写代码*/
        div{
             400px;
            height: 300px;
            border:20px solid #e87d7d;
            paddding:20px;
            background: #acacac no-repeat center center;
            background-image: url(http://climg.mukewang.com/582c39c00001091605000150.jpg);
            background-size: 90% ;
            background-origin: padding-box;
        }

    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div>慕课网</div>
</body>
</html>

1.5 CSS背景整合

背景属性可以在一个声明中设置所有的背景属性

color:颜色
position:背景图片位置
size:图片大小尺寸
repeat:是否重复
orgin:定位
clip：区域
attachment：状态（随着页面滚屏，还是固定不变）
image:背景图片的URL

div{
      background: #abcdef center 50% no-repeat content-box content-box fixed url();
}
div{
      background: #abcdef center no-repeat  url();/*css直接完成，下面的机制不一样，建议分开写*/
      background-size: 50%;
      background-origin: content-box;
      background-clip: content-box;
      background-attachment: fixed;
}

2.背景渐变

渐变可以在两个或多个指定的颜色之间显示平稳的颜色过渡。
渐变分为2类，线性渐变和径向渐变。

2.1线性渐变

线性渐变是沿着一根轴线来改变颜色，从起点到终点。
语法

    //默认从上到下渐变
    div.one{
        background:-webkit-linear-gradient(color1, color2);
        background:   -moz-linear-gradient(color1, color2);
        background:     -o-linear-gradient(color1, color2);
        background:        linear-gradient(color1, color2);
    }
    //指定渐变方向
    div.two{
        background:-webkit-linear-gradient(起始方向, color1, color2);
        background:   -moz-linear-gradient(终点方向, color1, color2);
        background:     -o-linear-gradient(终点方向, color1, color2);
        background:        linear-gradient(to 终点方向, color1, color2);
    }
    //对角线方向
    div.three{
        background:-webkit-linear-gradient(起始方向1 起始方向2, color1, color2);
        background:   -moz-linear-gradient(终点方向1 终点方向2, color1, color2);
        background:     -o-linear-gradient(终点方向1 终点方向2, color1, color2);
        background:        linear-gradient(to 终点方向1 终点方向2, color1, color2);
    }
    //使用角度进行控制 从12点钟到6点，为0-180度；从12点逆时针到6点，是0- -180度。
    div.four{
        background:-webkit-linear-gradient(135deg,yellow,red);
        background:   -moz-linear-gradient(135deg,yellow,red);
        background:     -o-linear-gradient(135deg,yellow,red);
        background:        linear-gradient(135deg,yellow,red);
    }

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
    /*此处写代码*/
    div{
        float: left;
        overflow: hidden;
        margin:10px;
         300px;
        height: 300px;
    }
    div.one{
        background:-webkit-linear-gradient(yellow,red);
        background:   -moz-linear-gradient(yellow,red);
        background:     -o-linear-gradient(yellow,red);
        background:        linear-gradient(yellow,red);
    }
    div.two{
        background:-webkit-linear-gradient(left,yellow,red);
        background:   -moz-linear-gradient(right,yellow,red);
        background:     -o-linear-gradient(right,yellow,red);
        background:        linear-gradient(to right,yellow,red);
    }
    div.three{
        background:-webkit-linear-gradient(right bottom,yellow,red);
        background:   -moz-linear-gradient(left top,yellow,red);
        background:     -o-linear-gradient(left top,yellow,red);
        background:        linear-gradient(to left top,yellow,red);
    }
    div.four{
        background:-webkit-linear-gradient(135deg,yellow,red);
        background:   -moz-linear-gradient(135deg,yellow,red);
        background:     -o-linear-gradient(135deg,yellow,red);
        background:        linear-gradient(135deg,yellow,red);
    }
    </style>
</head>
<body>
    <!--此处写代码-->
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</html>

2.2 控制颜色的分布

/*1.通过百分比来控制颜色的分布，第一个颜色不填默认0，最后一个颜色默认100%。如果不指定百分比，就是等分 */
background:        linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
/*2. CSS3线性渐变中的透明度，颜色渐变的透明效果使用rgba（）进行表示，透明度的取值是0~1，如果值是0，那就是纯透明；如果值是1，就是不透明 */
background:        linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
    div{float:left;overflow: hidden;margin-right: 10px;}
    div.one{
         800px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
        background:   -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
        background:     -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
        background:        linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
    }
     div.two{
         800px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
        background:   -moz-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
        background:     -o-linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
        background:        linear-gradient(90deg, rgba(255,0,0,0) 20%, rgba(255,0,0,1) 50%, rgba(0,255,0, 0.9) 90%);
    }
    </style>      
</head>
<body>
    <div class="one"></div><br><br>
    <div class="two"></div>
</body>
</html>

2.3 线性重复渐变

/*如果要做斑马线效果，一个一个的复制过于繁琐，重复渐变就产生了*/
background:        repeating-linear-gradient(90deg, color 长度/百分比, color 长度/百分比 ...);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        div{float:left;overflow: hidden;margin-right: 10px;}
    div.one{
         400px;
        height: 300px;
        background:-webkit-repeating-linear-gradient(90deg, red, blue 20%);
        background:   -moz-repeating-linear-gradient(90deg, red, blue 20%);
        background:     -o-repeating-linear-gradient(90deg, red, blue 20%);
        background:        repeating-linear-gradient(90deg, red, blue 20%);
    }
     div.two{
         400px;
        height: 300px;
        background:-webkit-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
        background:   -moz-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
        background:     -o-repeating-linear-gradient(90deg, red, blue 10%, red 20%);
        background:        repeating-linear-gradient(90deg, red, blue 10%, red 20%);
    }
    </style>      
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2.4径向渐变

从起点到终点、颜色从内到外进行圆形渐变(从中间向外拉)

background: radial-gradients(center, shape size, start-color 长度|百分比, ...)
参数1:圆心的位置，值有center(默认)、bottom、top，也可以使用百分比。这里的百分比是相对元素左上角的位置。如10% 50%是距离左上角横向长度为10%长度，50%高度的位置
参数2:形状、尺寸。形状有circle圆形和ellipse椭圆形(默认)。如果元素宽高一样，参数不管是circle还是ellipse，显示结果都为圆形。
尺寸大小关键字有4个：closest-side: 最近边、closest-corner: 最近角、farthest-side: 最远边、farthest-corner: 最远角
参数3以后：颜色，可以用纯色，也可以用透明色。

近边、近角、远边、远角的示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        div{float:left;overflow: hidden;margin-right: 10px;margin-bottom: 10px;}
    div.one{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(10% 70%, circle closest-side, red, blue);
        background:   -moz-radial-gradient(10% 70%, circle closest-side, red, blue);
        background:     -o-radial-gradient(10% 70%, circle closest-side, red, blue);
        background:        radial-gradient(10% 70%, circle closest-side, red, blue);
    }
    div.two{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(10% 70%, circle closest-corner, red, blue);
        background:   -moz-radial-gradient(10% 70%, circle closest-corner, red, blue);
        background:     -o-radial-gradient(10% 70%, circle closest-corner, red, blue);
        background:        radial-gradient(10% 70%, circle closest-corner, red, blue);
    }
    div.three{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:   -moz-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:     -o-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:        radial-gradient(10% 70%, circle farthest-side, red, blue);
    }
    div.four{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:   -moz-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:     -o-radial-gradient(10% 70%, circle farthest-side, red, blue);
        background:        radial-gradient(10% 70%, circle farthest-side, red, blue);
    }
    </style>      
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

2.5 控制颜色的分布

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        div{float:left;overflow: hidden;margin-right: 10px;}
    div.one{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(10% 50%, circle closest-side, red, blue);
        background:   -moz-radial-gradient(10% 50%, circle closest-side, red, blue);
        background:     -o-radial-gradient(10% 50%, circle closest-side, red, blue);
        background:        radial-gradient(10% 50%, circle closest-side, red, blue);
    }
     div.two{
         400px;
        height: 300px;
        background:-webkit-radial-gradient(center, red, blue 50%, red 70%);
        background:   -moz-radial-gradient(center, red, blue 50%, red 70%);
        background:     -o-radial-gradient(center, red, blue 50%, red 70%);
        background:        radial-gradient(center, red, blue 50%, red 70%);
    }
    </style>      
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2.6 径向重复渐变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        div{float:left;overflow: hidden;margin-right: 10px;}
    div.one{
         400px;
        height: 300px;
        background:-webkit-repeating-radial-gradient(center, red, blue 20%);
        background:   -moz-repeating-radial-gradient(center, red, blue 20%);
        background:     -o-repeating-radial-gradient(center, red, blue 20%);
        background:        repeating-radial-gradient(center, red, blue 20%);
    }
     div.two{
         400px;
        height: 300px;
        background:-webkit-repeating-radial-gradient(center, red, blue 10%, red 20%);
        background:   -moz-repeating-radial-gradient(center, red, blue 10%, red 20%);
        background:     -o-repeating-radial-gradient(center, red, blue 10%, red 20%);
        background:        repeating-radial-gradient(center, red, blue 10%, red 20%);
    }
    </style>      
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

2.7 使用线性渐变绘制地板砖

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        div{
             800px;
            height: 500px;
            background-color:#abcdef;
            background-size: 100px 100px;
            background-image: -webkit-linear-gradient(45deg, red 25%, transparent 25%),
                              -webkit-linear-gradient(-45deg, red 25%, transparent 25%),
                              -webkit-linear-gradient(45deg, transparent 75%, red 75%),
                              -webkit-linear-gradient(-45deg, transparent 75%, red 75%);
            
            background-image: -moz-linear-gradient(45deg, red 25%, transparent 25%),
                              -moz-linear-gradient(-45deg, red 25%, transparent 25%),
                              -moz-linear-gradient(45deg, transparent 75%, red 75%),
                              -moz-linear-gradient(-45deg, transparent 75%, red 75%);

            
            background-image: -o-linear-gradient(45deg, red 25%, transparent 25%),
                              -o-linear-gradient(-45deg, red 25%, transparent 25%),
                              -o-linear-gradient(45deg, transparent 75%, red 75%),
                              -o-linear-gradient(-45deg, transparent 75%, red 75%);
            
            background-image: linear-gradient(45deg, red 25%, transparent 25%),
                              linear-gradient(-45deg, red 25%, transparent 25%),
                              linear-gradient(45deg, transparent 75%, red 75%),
                              linear-gradient(-45deg, transparent 75%, red 75%);
        }
    </style>      
</head>
<body>
<div></div>
</body>
</html>

查看全文

相关阅读:
Sharding-Jdbc 自定义分库分表-复合分片算法自定义实现
 sklearn：Python语言开发的通用机器学习库
 php验证码--图片
 ListView中的Item点击事件和子控件的冲突或者item点击没有反应的解决的方法
 【转载】C# Graphics类具体解释
 Oracle之外键(Foreign Key)使用方法具体解释（二）- 级联删除（DELETE CASCADE）
职业生涯-小公司和大公司的不同(持续更新)
视音频数据处理入门：AAC音频码流解析
 让人非常easy误解的TCP拥塞控制算法
 Redis资料整理

原文地址：https://www.cnblogs.com/csj2018/p/13581929.html