章节(23) 背景相关

一. 背景尺寸属性

1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

background-size:xxxx;
取值:
1.具体像素 >> background-size:200px 100px;
2.百分比 >> background-size:100% 80%;
3.宽度等比拉伸 >> background-size:auto 100px;
4.高度等比拉伸 >> background-size:100px auto;
5.cover >> background-size:cover;
  • 5.1告诉系统图片需要等比拉伸
  • 5.2告诉系统图片需要拉伸到宽度<a>和</a>高度都填满元素
6. contain >> background-size:contain;
  • 6.1告诉系统图片需要等比拉伸
  • 6.2告诉系统图片需要拉伸到宽度<a>或</a>高度都填满元素(<a>只保证一边填满</a>)
background-size

二. 背景图片定位区域属性

<a>background-origin</a> : 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;

取值:

1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
2.<a>border-box</a> >> background-origin:border-box; 从border位置开始
3.<a>content-box</a> >> background-origin:content-box;从content位置开始

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>113-背景图片定位区域属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            /*
            告诉系统背景图片从什么区域开始显示,
            默认情况下就是从padding区域开始显示
            */
            background-origin: padding-box;
        }
        ul li:nth-child(3){
            background-origin:border-box;
        }
        ul li:nth-child(4){
            background-origin:content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>
背景图片定位区域属性

三. 背景绘制区域属性

<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>114-背景绘制区域属性</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: red url("images/dog.jpg") no-repeat;
        }
        ul li:nth-child(2){
            /*
            背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
            */
            background-clip: padding-box;
        }
        ul li:nth-child(3){
            background-clip: border-box;
        }
        ul li:nth-child(4){
            background-clip: content-box;
        }
    </style>
</head>
<body>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>
</body>
</html>
背景绘制区域属性(红色为绘制区域)

四. 多重背景图片

<a>先添加的背景图片会盖住后添加的背景图片</a>

元素c3之后可以设置多张背景图片
多张背景图片之间用逗号隔开即可

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;
注意点:

先添加的背景图片会盖住后添加的背景图片

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

建议在编写多重背景时拆开编写

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom;

完整代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>115-多重背景图片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
            /*
            多张背景图片之间用逗号隔开即可
            注意点:
            先添加的背景图片会盖住后添加的背景图片
            建议在编写多重背景时拆开编写
            */
            /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/
            background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: left top, right top, left bottom;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
多重背景图片

四.多重背景图片联系

<a>先添加的背景图片会盖住后添加的背景图片</a>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>116-多重背景图片-练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
          //由于先添加的背景图片会盖住后添加的背景图片,故先添加飞机,太阳;后添加白云;
            background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-size: 50px 50px, 50px 50px, auto auto;//由于白云的图片尺寸为2247*190,保持它原有的就尺寸可以了
            background-position: 50px 150px, 400px 50px, 0px 0px;
            animation: move 10s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                background-position: 50px 150px, 400px 50px, 0px 0px;
            }
            to{
                background-position: 500px -150px, 400px 50px, -600px 0px;//让云朵往左运动
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
蓝天白云
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容

  • background-color background-color:#ff0000红色background-col...
    每日活菌阅读 491评论 0 0
  • Div和Span标签 什么是div? 作用: 一般用于配合css完成网页的基本布局 什么是span? 作用: 一般...
    Jackson_yee_阅读 806评论 1 1
  • 时间过的真是快,转眼六月了。话说间,半年倏然而过。常常说,后青春时代的日子,每一天过的,都是可以看得到的自己。重复...
    耿然君阅读 388评论 0 2
  • 遇到你是我三十年来最幸运的事,没错这是我经常对老公说的,老公在我心中一直是我崇拜的对象,他做事细心,有责任心,关键...
    长弓心悦阅读 244评论 0 0
  • 今天第一次使用这个app,在看热门时看到一个关于父亲的题目,我才忽然想起来昨晚我还梦到了自己的父亲,也是这一...
    紫洛阅读 453评论 0 2