㈠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. [转帖]CENTOS6.6下mysql5.7.11带boost和不带boost的源码安装

    CENTOS6.6下mysql5.7.11带boost和不带boost的源码安装 本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuir ...

  2. Linu下安装与卸载MySQL数据库

    卸载MySQL数据库,具体操作如下: (1)rpm -qa | grep -i mysql // 检查是否安装了MySQL的组件 (2)卸载前先关闭MySQL服务, a. b. (3)删除MySQL各 ...

  3. 设计模式在 Spring 框架中的良好应用

    在开始正文之前,请你先思考几个问题: 你项目中有使用哪些 GOF 设计模式 说一说 GOF 23 种设计模式的设计理念 说说 Spring 框架中如何实现设计模式 假设我是面试官问起了你这些面试题,你 ...

  4. ajax怎么打开新窗口具体如何实现

    var newwindow=window.open('about:blank'); jQuery.ajax({ type: 'POST', url: 'clickRate.action', dataT ...

  5. linux centos7.3安装lnmp，nginx-1.11.12 ,php7.0.2 ,

    #更新源 yum -y update #添加用户和组 adduser www groupadd www usermod -G www www #初始化目录 mkdir -p /data/app/php ...

  6. Django 模版语法与使用

    目录 Django 模版语法与使用 django模板语言介绍 (摘自官方文档) 链接 什么是模板? 模板语句的 注释 变量 {{ 变量 }} 点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值 ...

  7. Codeforces 1203F2. Complete the Projects (hard version)

    传送门 首先对于 $b>0$ 的工作显然有个贪心,把 $b>0$ 的按 $a$ 从小到大排序 把能做的都做了,然后得到一个最大等级 剩下就是考虑 $b<0$ 的工作了,看到数据显然可 ...

  8. Css常用的技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  9. O010、动手实践虚拟网络

    参考https://www.cnblogs.com/CloudMan6/p/5296573.html   本节将演示如何在实验环境中实现下图所示的虚拟网络  

  10. MySQL 的索引是什么？怎么优化？

    索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...