㈠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. 牛客小白月赛14 -G (筛法）

    题目链接:https://ac.nowcoder.com/acm/contest/879/G 题意:给定A1和A数组公式: 以及B数组: 求 思路:利用筛法更新b数组,最后求异或和即可. AC代码: ...

  2. Maven简单项目及命令使用

    项目结构如下 HelloWorld.java package pak1; public class HelloWorld { public String sayHello(){ return &quo ...

  3. LZH的多重影分身 qduoj 思维 差分

    LZH的多重影分身 qduoj 思维 差分 原题链接:https://qduoj.com/problem/591 题意 在数轴上有\(n\)个点(可以重合)和\(m\)条线段(可以重叠),你可以同时平 ...

  4. Mysql8 root密码忘记了

    需要确定自己的mysql版本是否是8 [root@smonitor ~]# mysql --version mysql Ver 8.0.13 for Linux on x86_64 (MySQL Co ...

  5. 附录3：RMA算法原理

    RMA算法分三步: 一.背景校正(没精力写了) 二.归一化(没精力写了) 三.计算表达值 假设有5张芯片,这些芯片的某个探针组包含5个探针,它们的表达值如下: GeneChip 4 8 6 9 7 3 ...

  6. sql--inner join , out join

    inner join(又叫join) out join包括left join,right join和full join(也就是left+right)

  7. Python爬虫 Selenium与PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动化操作,不同是Sele ...

  8. js中new到底做了什么?如何重写new?

    new 构造函数()执行顺序1.在堆中开辟对象内存空间, 记为obj2.在obj 中添加__proto__属性并指向 构造函数.prototype3.将构造函数中的this 指向obj4.执行构造函数 ...

  9. jQuery 遍历 - 祖先

    通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() pare ...

  10. pytorch简单框架

    网络搭建: mynn.py: import torchfrom torch import nnclass mynn(nn.Module): def __init__(self): super(mynn ...