㈠background-size 属性

⑴background-size 属性规定背景图片的尺寸。

⑵在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许在不同的环境中重复使用背景图片。

⑶能以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

⑷语法：background-size: length|percentage|cover|contain;

 ⑸示例1：调整背景图片的大小

 <!DOCTYPE html>

 <html>

 <head>

 <style>

     body

          {

              background:url(../图片/7.jpg);

              background-size:200px 160px;

              background-repeat:no-repeat;

              padding-top:150px;

          }

 </style>

 <title>调整背景图片大小</title>

 </head>

 <body>

 <p>上面是缩小的背景图片。</p>

 <p>原始图片：<img src="../图片/7.jpg"></p>

 </body>

 </html>

效果图：

⑹示例2：对背景图片进行拉伸，使其完成填充内容区域

 <!DOCTYPE html>

 <html>

 <head>

 <style>

      div{

            background:url(../图片/8.jpg);

            background-size:35% 100%;

            background-repeat:no-repeat;

          }

 </style>

 <title>对背景图片进行拉伸，使其完成填充内容区域</title>

 </head>

 <body>

 <div>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 <p>重复是最好的老师。</p>

 </div>

 </body>

 </html>

效果图：

㈡background-origin 属性

⑴background-origin 属性规定 background-position 属性相对于什么位置来定位。

⑵如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

⑶background-origin 属性规定背景图片的定位区域。

    背景图片可以放置于 content-box、padding-box 或 border-box 区域。

   

⑷语法：background-origin: padding-box|border-box|content-box;

⑸示例：在 content-box 中定位背景图片

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 border:1px solid black;

 padding:35px;

 background-image:url('1.jpg');

 background-repeat:no-repeat;

 background-position:left;

 }

 #div1

 {

 background-origin:border-box;

 }

 #div2

 {

 background-origin:content-box;

 }

 </style>

 </head>

 <body>

 <p>background-origin:border-box:</p>

 <div id="div1">

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 </div>

 <p>background-origin:content-box:</p>

 <div id="div2">

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 </div>

 </body>

 </html>

效果图：

㈢多重背景图片 

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 body

 {

 background-image:url(../图片/8.jpg),url(../图片/7.jpg);

 }

 </style>

 <title>多重背景</title>

 </head>

 <body>

 </body>

 </html>

 效果图：

㈣background-clip 属性

⑴background-clip 属性规定背景的绘制区域。

⑵语法：background-clip: border-box|padding-box|content-box;

⑶示例：规定背景的绘制区域

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:300px;

 height:300px;

 padding:50px;

 background-color:yellow;

 background-clip:content-box;

 border:2px solid #92b901;

 }

 </style>

 <title>规定背景的绘制区域</title>

 </head>

 <body>

 <div>

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

 </div>

 </body>

 </html>

 效果图：

     希望有所帮助！

CSS3 的背景属性的更多相关文章

  1. Css3新增背景属性

    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...

  2. css3之背景属性之background-size

    一.相关属性: background-image: url(“./img/a.jpg”); //设置元素背景图片 background-repeat: repeat/no-repeat: //设置背景 ...

  3. CSS 常用样式 – 背景属性

    一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 & ...

  4. CSS3 背景属性

    CSS3 background-size 属性 div {background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 ...

  5. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  8. css3的一些属性

    以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合anima ...

  9. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

随机推荐

  1. gulp时发生错误---------const { Math, Object } = primordials;

    [问题描述] 执行完npm install后,对前台页面进行gulp操作时,报如下错误: const { Math, Object } = primordials; [错误日志] ***@**** M ...

  2. 吉首大学2019年程序设计竞赛（重现赛）-K(线段树)

    题目链接:https://ac.nowcoder.com/acm/contest/992/K 题意:给一个大小为1e5的数组,由0 1组成,有两种操作,包括区间修改,将一段区间内的0换成1,1换成0; ...

  3. Spring（十三）-- Spring 事务

    Spring 事务 1. 回忆之前事务知识点  一:事务的概念 将一系列的数据操作捆绑在一起,成为一个整体进行统一管理! 一条或者多条sql语句的集合!  二:事务的ACID特性 原子性(Atomic ...

  4. 【面试向】hihoCoder 1994 树与落叶

    题目链接 Implementation int n, q; scan(n,q); vi p(n + 1); vi nson(n + 1); up (i, 1, n) { scan(p[i]); nso ...

  5. Ubuntu中配置Python虚拟环境Virtualenv

    Ubuntu版本为18.04 Virtualenv介绍 在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-pac ...

  6. cut,sort,awk,sed,tr,find,wc,uniq在Linux中的用法

    cut语法cut [-bn] [file]cut [-c] [file]cut [-df] [file] -b :以字节为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志.-c ...

  7. Redis: 缓存过期、缓存雪崩、缓存穿透、缓存击穿(热点)、缓存并发(热点)、多级缓存、布隆过滤器

    Redis: 缓存过期.缓存雪崩.缓存穿透.缓存击穿(热点).缓存并发(热点).多级缓存.布隆过滤器 2019年08月18日 16:34:24 hanchao5272 阅读数 1026更多 分类专栏: ...

  8. Map<k,v>接口

    https://docs.oracle.com/javase/8/docs/api/java/util/Map.html public interface Map<K,V> K—key,V ...

  9. Elasticsearch入门教程(六)：Elasticsearch查询(二)

    原文:Elasticsearch入门教程(六):Elasticsearch查询(二) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  10. 基于CentOS系统部署EPICS环境

    1.虚拟机安装CentOS系统2.打开终端,以root账户登录3.进入/usr/local目录下,新建文件夹epics,并进入该文件夹4.在/usr/local/epics目录下,执行wget htt ...