㈠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. 【Python】【基础知识】【内置函数】【help的使用方法】

    原英文帮助文档: help([object]) Invoke the built-in help system. (This function is intended for interactive ...

  2. 云数据库 MongoDB版

    阿里云云数据库MongoDB版是一种安全可靠.可弹性伸缩的云数据库服务,目前支持ReplicaSet和Sharding两种部署架构,通过简单的几步操作即可快速部署.阿里云云数据库MongoDB版是一种 ...

  3. （电脑重置之后）win10在桌面点右键鼠标一直转圈；无法点击桌面图标；

    昨天重置系统之后,发现了这个毛病.桌面任务栏都能正常点击,就是一到桌面,无法点击桌面上面的图标(刚开机的时候还可以点).想新建文件夹来着,一点右键,鼠标即开始转圈圈.本来以为自己能好,结果第二天了还这 ...

  4. java程序中访问https时，报 PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

    在java中使用https访问数据时报异常: Caused by: sun.security.validator.ValidatorException: PKIX path building fail ...

  5. C#中static修饰符的作用

    static在C#中表示的是静态的,比如一个静态的字段是归类型所有,而非归对象所有,也就是说,在调用这个字段时,只能用类型去调,而不能用对象. 实例字段时随着对象创建而创建,对象销毁而销毁,而静态字段 ...

  6. python 中的 [:-1] 和 [::-1]

    1.案例解释 a='python' b=a[::-1] print(b) #nohtyp c=a[::-2] print(c) #nhy #从后往前数的话,最后一个位置为-1 d=a[:-1] #从位 ...

  7. Flask与微信小程序登录(后端)

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后 ...

  8. vue中添加与删除，关键字搜索

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ccs之经典布局（一）（水平垂直居中）

    经典的css布局有以下几种,下面分别用不同的方法进行实现且进行对比. 一.水平居中 水平居中布局指的是当前元素在父级元素的容器中,水平方向上显示的是居中的,有以下几种方式来完成布局: 1.margin ...

  10. pl/sql 笔记之基础（上）

    由于公司中使用 oracle,而本人对存储过程一直也懵懵懂懂,故一周时间学习了一遍 pl/sql,在此记下笔记!!! 一.前提,pl/sql 是啥? 1.PL/SQL是一种高级数据库程序设计语言,该语 ...