CSS3学习笔记（二）

2019-08-25 本文已影响0人 dev_winner

background-origin：元素背景图片的原始位置。语法：

background-origin : border-box | padding-box | content-box;

参数分别表示背景图片是从边框，内边距（默认值），或者内容区域开始显示。注意：若背景图片不是no-repeat，则此属性无效，它会从边框开始显示。

设置背景图片的原始位置

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
    width:220px; 
    /*dashed为虚线边界*/
    border:20px dashed #000; 
    padding:20px; 
    font-weight: bold; 
    color: red; 
    background:#ccc url(./壁纸.jpg)no-repeat; 
    /*设置元素背景图片的原始起始位置：从内容区域开始显示*/
    background-origin: content-box;
    position: relative;
    /*父元素设置相对定位*/
}
.wrap span { 
    /*子元素设置绝对定位*/
    position: absolute; 
    left:0; 
    top:0;
}
.content {
    height:80px; 
    border:1px solid #333;
}
</style>  
</head> 
<body>
<div class="wrap">
    <span>padding</span>
    <div class="content">content</div>
</div>
</body>
</html>

从内容区域开始显示背景图片

background-clip：用来将背景图片做适当的裁剪以适应实际需要。语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内边距，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。默认值为border-box。

对背景图片做适当裁剪

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>背景裁切</title>
<style type="text/css">
.wrap {
    width:220px; 
    /*dashed为虚线边界*/
    border:20px dashed #000; 
    padding:20px; 
    /*设置黑体*/
    font-weight:bold;
     /*设置字体颜色为红色*/
    color: red; 
    background:#ccc url(./壁纸.jpg)no-repeat; 
    /*设置元素背景图片的原始起始位置：从内容区域开始显示*/
    background-origin: border-box;
    /*从内边距向外裁剪背景图片*/
    background-clip: padding-box;
    position: relative;
    /*父元素设置相对定位*/
}
.wrap span { 
    /*子元素设置绝对定位*/
    position: absolute; 
    left:0; 
    top:0;
}
.content {
    height:80px; 
    border:1px solid #333;
}
</style>  
</head> 
<body>
<div class="wrap">
    <span>padding</span>
    <div class="content">content</div>
</div>
</body>
</html>

从内边距向外裁剪背景图片

background-size：设置背景图片的大小，以长度值或百分比显示，还可通过cover和contain来对图片进行伸缩。语法：

background-size:  auto | <长度值> | <百分比> | cover | contain

参数说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px（宽） 50px（高），将背景图片宽高依次设置为前面两个值；当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以百分比得出的数值，当设置一个值时，将其作为图片宽度值来等比缩放；
4、cover：覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片大小</title>
    <style type="text/css">
    .demo,
    .demo1,
    .demo2,
    .demo3,
    .demo4 {
        background: url(./壁纸.jpg) no-repeat;
        width: 300px;
        height: 140px;
        border: 1px solid #999;
        /*改为内联块元素*/
        display: inline-block;
    }
    .demo {
        background-size: contain;
    }
    .demo1 {
        background-size: cover;
        margin-left: 50px;
    }
    .demo2 {
        /*占满容器大小*/
        background-size: 300px 140px;
    }
    .demo3 {
        background-size: 70%;
        margin-left: 50px;
    }
    .demo4 {
        background-size: auto;
        margin-left: 70px;
    }
    #id2 {
        margin-left: 120px;
    }
    #id4 {
        margin-left: 150px;
    }
    #id5 {
        margin-left: 150px;
    }
    </style>
</head>
<body>
    <div class="demo"></div>
    <div class="demo1"></div>
    <hr>
    <span id="id1">①设置背景图片大小为contain容纳值</span>
    <span id="id2">②设置背景图片大小为cover覆盖值</span>
    <hr>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <hr>
    <span id="id3">③设置背景图片大小为容器大小</span>
    <span id="id4">④设置背景图片大小的百分比值：70%</span>
    <span id="id5">设置背景图片大小为默认值auto</span>
    <hr>
</body>
</html>

设置背景图片的大小

multiple backgrounds：多重背景，即CSS2里background的属性加上origin、clip和size组成的新background的多次叠加，缩写时用逗号隔开每组值；用分解写法时，若有多张背景图片，且某个属性只有一个值（例如background-repeat属性的值只有一个），表明所有背景图片应用该属性值。语法：

/* 
缩写形式，竖线是选项，但是有些选项不能同时在一起，最好是写成分解的形式才清晰明了
*/
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
/*
分解形式
*/
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：
1、如果有 size 值，需要紧跟在 position后面并且用 / 隔开；
2、background-color只能设置一个！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重背景</title>
    <style type="text/css">
    .demo {
        width: 300px;
        height: 140px;
        border: 1px solid #999;
        background-image: url(./7.jpg),
            url(./8.jpg),
            url(./9.jpg);
        background-position: left top, 100px 0, 200px 0;
        background-repeat: no-repeat;
        margin: 0 0 20px 0;
    }
    .task {
        width: 300px;
        height: 140px;
        border: 1px solid #999;

        background: url(./abc.png) top left / 70% 57%,
            url(./abc.png) bottom right / 50% 43%;
        /*background-size: 70% 57%, 50% 43%;*/
        /*background-position: top left, bottom right;*/
        background-repeat: no-repeat;
        background-color: #f40;
    }
    </style>
</head>
<body>
    <div class="demo"></div>
    <div class="task"></div>
</body>
</html>

设置多重背景

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>CSS制作立体导航</title>
    <style>
    body {
        background: #ebebeb;
    }
    .nav {
        width: 560px;
        height: 50px;
        font: bold 0/50px Arial;
        text-align: center;
        margin: 40px auto 0;
        background: #f65f57;
        /*制作导航圆角*/
        border-radius: 10px;
        /*制作导航立体风格，即添加盒子阴影*/
        box-shadow: 0px 5px 0px #B0483F;
    }
    .nav a {
        /*设置为内联块元素*/
        display: inline-block;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        /* 设置过渡效果 0.2秒 缓动*/
        transition: all 0.2s ease-in;
    }
    .nav a:hover {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        /*鼠标指针浮动在a标签元素时顺时针旋转10度*/
        transform: rotate(10deg);
    }
    .nav li {
        position: relative;
        /*li标签原为块级元素（独占一行），
        此处设置为内联块元素，导航中的菜单才能显示在同一行*/
        display: inline-block;
        padding: 0 16px;
        font-size: 13px;
        /*设置盒子阴影*/
        text-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        /*去除列表项目前面的样式，默认是实心圆*/
        list-style: none outside none;
    }
    /*使用伪元素制作导航列表项分隔线*/
    .nav li::before,
    .nav li::after {
        content: "";
        /*相对于li标签绝对定位*/
        position: absolute;
        top: 14px;
        height: 25px;
        width: 1px;
    }
    /*设置分隔线背景线性渐变色*/
    .nav li::before {
        left: 0;
        background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
        background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
        background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
        background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
        background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
    }
    .nav li::after {
        right: 0;
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
        background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0));
    }
    /*删除第一项和最后一项导航分隔线*/
    .nav li:first-child::before,
    .nav li:last-child::after {
        /*设置背景样式为无*/
        background: none;
    }
    .nav a,
    .nav a:hover {
        color: #fff;
        /*去掉a标签的下划线*/
        text-decoration: none;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Contact Me</a></li>
    </ul>
</body>
</html>

制作导航菜单

CSS3学习笔记（二）

猜你喜欢

热点阅读