HTML 5_CSS 3_JavaScript讲义（七）-背景，

作者: android小菜鸡一枚 | 来源:发表于2017-12-12 11:51 被阅读0次

HTML 5_CSS 3_JavaScript讲义（七）-背景，
HTML 5_CSS 3_JavaScript讲义（三）-HTM
HTML 5_CSS 3_JavaScript讲义（四）-HTM
HTML 5_CSS 3_JavaScript讲义（十二）- D
HTML 5_CSS 3_JavaScript讲义（六）- 字体
HTML 5_CSS 3_JavaScript讲义（八）- 大小
HTML 5_CSS 3_JavaScript讲义（九） - 盒
HTML 5_CSS 3_JavaScript讲义（二）-HTM
HTML 5_CSS 3_JavaScript讲义（十一）- 变
HTML 5_CSS 3_JavaScript讲义（十）- 表格

（1）.背景相关属性

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:1px solid #000;
        height: 50px;
        width: 200px;
    }
    </style>
</head>
<body>
<!-- 灰色背景 -->
background-color:#aaa 
<div style="background-color:#aaa;">测试文字</div>
<!-- 以默认样式指定背景图片，将会在横向、纵向上平铺 -->
background-image:url(wjc.gif)
<div style="background-image:url(wjc.gif);">测试文字</div>
<!-- 不平铺的背景图片 -->
background-image:url(wjc.gif);background-repeat: no-repeat
<div style="background-image:url(wjc.gif);
    background-repeat:no-repeat;">测试文字</div>
<!-- 仅横向平铺的背景图片 -->
background-image:url(logo.gif);background-repeat: repeat-x
<div style="background-image:url(wjc.gif);
    background-repeat:repeat-x;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
    background-position: 35% 80%;
<div style="background-image:url(wjc.gif);background-repeat:
    no-repeat;background-position:35% 80%;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
    background-position: 30px 12px;
<div style="background-image:url(wjc.gif);background-repeat:
    no-repeat;background-position:30px 8px;">测试文字</div>
<!-- 不平铺的背景图片，并指定背景图片的位置 -->
background-image:url(wjc.gif);background-repeat:no-repeat;
    background-position: center bottom;
<div style="background-image:url(wjc.gif);background-repeat:
    no-repeat;background-position:center bottom;">测试文字</div>
</body>
</html>

image.png

1.背景图片固定

backgroud-attachment:fixed

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 背景固定 </title>
</head>
<!-- 指定背景图片固定 -->
<body style="background-image:url(sky.gif);background-attachment:fixed">
<ul style="font-size:30pt;">
    <script type="text/javascript">
        for(var i = 0 ; i < 15 ; i++)
        {
            document.writeln("<li>疯狂Java讲义</li>");
        }
    </script>
</ul>
</body>
</html>

image.png

2.CSS3新增的背景相关属性

image.png

background-clip:

border-box: 背景覆盖border,padding,content
no-clip:背景覆盖border,padding,content
padding-box:背景覆盖padding,content
content:背景覆盖content

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:10px dotted #444;
        padding: 12px;
        height: 30px;
        width: 200px;
    }
    </style>
</head>
<body>
background-image:url(wjc.gif)
<div style="background-image:url(wjc.gif);">测试文字</div>
background-image:url(wjc.gif);background-clip:no-clip;
<div style="background-image:url(wjc.gif);
background-clip:no-clip;">测试文字</div>
background-image:url(wjc.gif);background-clip:padding-box;
<div style="background-image:url(wjc.gif);
background-clip:padding-box;">测试文字</div>
background-image:url(wjc.gif);background-clip:content-box;
<div style="background-image:url(wjc.gif);
background-clip:content-box;">测试文字</div>
</body>
</html>

image.png

background-origin:

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:10px dotted #444;
        padding: 12px;
        height: 30px;
        width: 200px;
    }
    </style>
</head>
<body>
<!-- 背景图片从内容区开始覆盖 -->
background-image:url(wjc.gif);background-origin:content;
<div style="background-image:url(wjc.gif);background-origin:content;
-webkit-background-origin:content;background-repeat:no-repeat;">测试文字</div>
<!-- 背景图片从内补丁区开始覆盖 -->
background-image:url(wjc.gif);background-origin:padding;
<div style="background-image:url(wjc.gif);background-origin:padding;
-webkit-background-origin:padding;background-repeat:no-repeat;">测试文字</div>
<!-- 背景图片从边框区开始覆盖 -->
background-image:url(wjc.gif);background-origin:border;
<div style="background-image:url(wjc.gif);background-origin:border;
-webkit-background-origin:border;background-repeat:no-repeat;">测试文字</div>
</body>
</html>

image.png

background-size:

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:1px solid #000;
        height: 50px;
        width: 200px;
    }
    </style>
</head>
<body>
background-image:url(wjc.gif)
<div style="background-image:url(wjc.gif);"></div>
background-image:url(wjc.gif);background-size:100% 80%;
(背景图片的宽度与组件宽度相同、高度为组件高度的80％)
<div style="background-image:url(wjc.gif);
-webkit-background-size:100% 80%;background-size:100% 80%;"></div>
background-image:url(wjc.gif);background-size:20% auto;
(背景图片的宽度为组件宽度20%、高度保持纵横比缩放)
<div style="background-image:url(wjc.gif);
-webkit-background-size:20% auto;background-size:20% auto;"></div>
background-image:url(wjc.gif);background-size:auto 50%;
(背景图片的宽度保持纵横比缩放、高度为组件宽度50%)
<div style="background-image:url(wjc.gif);
-webkit-background-size:auto 50%;background-size:auto 50%;"></div>
background-image:url(wjc.gif);;background-size:60px 30px;
(背景图片的宽度为60px、高度为30px)
<div style="background-image:url(wjc.gif);
-webkit-background-size:60px 30px;background-size:60px 30px;"></div>
background-image:url(wjc.gif);background-size:40px auto;
(背景图片的宽度为40px，高度保持纵横比缩放)
<div style="background-image:url(wjc.gif);
-webkit-background-size:40px auto;background-size:40px auto;"></div>
background-image:url(wjc.gif);background-size:auto 50%;
(背景图片的宽度保持纵横比缩放、高度为组件宽度20px)
<div style="background-image:url(wjc.gif);
-webkit-background-size:auto 20px;background-size:auto 20px;"></div>
</body>
</html>

image.png

3.CSS3新增的多背景图片

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div#div1{
        border:1px solid #000;
        height: 160px;
        width: 500px;
        /* 依次指定了3个背景图片 */
        background-image: url(snow.gif), url(face.gif), url(sky.gif);
        /* 依次指定了3个背景图片的重复方式：纵向重复、横向重复、两个方向重复 */
        background-repeat: repeat-y, repeat-x, repeat;
        /* 依次指定了3个背景图片的位置 */
        background-position: center top, left center, left top;
    }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

image.png

（2）.边框相关属性

border
border-color
border-style
border-width

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>边框相关属性测试</title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width:300px;
            height:40px;
        }
    </style>
</head>
<body>
border:5px solid #666
<div style="border:5px solid #666">
宽度为5的灰色实线边框</div>
border:2px dashed #666
<div style="border:2px dashed #666">
宽度为2的灰色虚线边框</div>
border:2px dotted #666
<div style="border:2px dotted #666">
宽度为2的灰色点线边框</div>
border:5px groove #666
<div style="border:5px groove #666">
宽度为5的灰色凹槽边框</div>
border:8px inset #666
<div style="border:8px inset #666">
宽度为8的灰色的凹入边框</div>
border:8px outset #666
<div style="border:8px outset #666">
宽度为8的灰色的凸出边框</div>
border-width:8px 2px;border-style:solid dashed;border-color:#ccc #444;
<div style="border-width:8px 2px;border-style:solid dashed; 
    border-color:#ccc #444;">
上下两条边框样式为：8px solid #ccc;<br/>
左右两条边框样式为：2px dashed #444</div>
border-width:3px;border-style:solid;border-color:#ccc #ccc #444 #444;
<div style="border-width:8px;border-style:solid; 
    border-color:#ccc #ccc #444 #444;">
让四条边框颜色不同作出的立体效果</div>
</body>
</html>

image.png

1.圆角边框

border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 渐变边框 </title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width:300px;
            height:60px;
        }
    </style>
</head>
<body>
<div style="border:3px solid black;border-radius:20px;">
半径为20px的圆角边框</div>
<div style="border:3px dotted black;border-radius:20px;">
半径为20px的圆角边框</div>
<div style="background-color:#aaa;border-radius:20px;">
半径为20px的圆角边框（不显示边框）</div>
<div style="border:3px solid black;border-radius:16px 40px;">
半径为16px 40px的圆角边框</div>
<div style="border:3px solid black;border-radius:10px 20px 40px;">
半径为10px 20px 40px;的圆角边框</div>
<div style="border:3px solid black;border-radius:10px 20px 30px 40px;">
半径为10px 20px 30px 40px的圆角边框</div>
<div style="border:3px solid black;
border-top-left-radius:30px;
border-top-right-radius:20px;
border-bottom-right-radius:40px;
border-bottom-left-radius:10px;">
分开指定4个角的半径</div>
</body>
</html>

image.png

2.CSS3提供了图片边框

border-image-source
border-image-slice
border-image-width
border-image-repeat

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 图片边框 </title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width:400px;
            height:45px;
        }
    </style>
</head>
<body>
border-image: url(border.png) 27
<div style="-o-border-image: url(border.png) 27;
-moz-border-image: url(border.png) 27;
-webkit-border-image: url(border.png) 27;
">默认边框宽度</div>
border-image: url(border.png) 27/27px
<div style="-o-border-image: url(border.png) 27/27px;
-moz-border-image: url(border.png) 27/27px;
-webkit-border-image: url(border.png) 27/27px;
">指定边框宽27px，默认是拉伸边框图片</div>
border-image: url(border.png) 27/27px repeat
<div style="-o-border-image: url(border.png) 27/27px repeat;
-moz-border-image: url(border.png) 27/27px repeat;
-webkit-border-image: url(border.png) 27/27px repeat;
">指定边框宽27px，平铺边框图片</div>
border-image: url(border.png) 27/27px round;
<div style="-o-border-image: url(border.png) 27/27px round;
-moz-border-image: url(border.png) 27/27px round;
-webkit-border-image: url(border.png) 27/27px round;
">指定边框宽27px，round方式平铺边框图片</div>
border-image: url(border.png) 27/27px stretch round;
<div style="-o-border-image: url(border.png) 27/27px stretch round;
-moz-border-image: url(border.png) 27/27px stretch round;
-webkit-border-image: url(border.png) 27/27px stretch round;
">指定边框宽27px，横向stretch方式覆盖边框图片，
纵向round方式平铺图片</div>
</body>
</html>

image.png

（3）补丁相关属性

padding
padding-top padding-bottom padding-left padding-right

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>轮廓相关属性测试</title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
padding:10px 50px;
<div style="padding:10px 50px;">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
padding:10px 30px 2px 60px;
<div style="padding:10px 30px 10px 60px;">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

image.png

margin
margin-top margin-bottom margin-right margin-left

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>轮廓相关属性测试</title>
    <style type="text/css">
        /* 设置div元素的宽度和高度 */
        div {
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
margin:30px 50px;
<div style="margin:30px 50px;">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
margin:10px 40px 10px 90px;
<div style="margin:10px 40px 10px 90px;">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

image.png

HTML 5_CSS 3_JavaScript讲义（七）-背景，
（1）.背景相关属性 1.背景图片固定 backgroud-attachment:fixed 2.CSS3新增的背...
HTML 5_CSS 3_JavaScript讲义（三）-HTM
（1）使用canvas元素绘制图形的容器,必须使用javascript脚本来绘制图形（2）绘图 1.Canva...
HTML 5_CSS 3_JavaScript讲义（四）-HTM
（1）.使用audio和video元素（2）.使用javascript脚本控制媒体播放 HTMLAudioEle...
HTML 5_CSS 3_JavaScript讲义（十二）- D
（1）访问HTML元素 1.1 根据ID访问HTML元素 document.getElementById(idV...
HTML 5_CSS 3_JavaScript讲义（六）- 字体
（1）.字体相关属性 1.添加阴影 text-shadow : color xoffset yoffset rad...
HTML 5_CSS 3_JavaScript讲义（八）- 大小
（1）.大小相关属性 heigth max-height min-heightwidth max-width mi...
HTML 5_CSS 3_JavaScript讲义（九） - 盒
（1）.布局相关属性 1.通过float属性实现多栏布局 2.使用clear属性实现换行 3.使用clip属性控制...
HTML 5_CSS 3_JavaScript讲义（二）-HTM
（1）.HTML原有的表单及表单控件 1.表单元素 action:表单提交到的地址method:指定提交表单时发送...
HTML 5_CSS 3_JavaScript讲义（十一）- 变
（1）.CSS3提供的变形支持 1.1 4种基本变形 1.2 同时应用多种变形 1.3 指定变形中心点 tr...
HTML 5_CSS 3_JavaScript讲义（十）- 表格
（1）.表格相关属性 border-collapse: 控制两个单元格的边框是合并在一起还是按照标准的HTML样式...