㈠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. 配置Tomcat时退出就自动还原问题

    因为出现中文乱码问题需要配置server.xml文件,可是在每次配置完并且保存的情况下,重启服务器再看server.xml文件时,它自动还原到了未修改前的配置,后,解决如下: 第一步:打开eclips ...

  2. C语言|作业07

    一.本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://i-beta.cnblogs.com/posts/edit;postId=11811545 我在这个课程的 ...

  3. ORA-00911: invalid character解决方法

    今天在搭建VLS系统后,登录系统测试时发现点击菜单提示错误“ORA-00911:???”.网上很多是因为语句中带分号导致的,但是这次是点开菜单就报错,怀疑是字符集设置的问题. 参考网上的解决方案,添加 ...

  4. 如何解决Oracle11g使用dmp命令无法导出空表问题

    如何解决Oracle11g使用dmp命令无法导出空表问题 导出:exp  username/password@orcl file=路径 tables=(tb1)    //tables=(tb1)可有 ...

  5. 小记--------spark-Wordcount经典案例之对结果根据词频进行倒序排序

    还是以经典案例Wordcount为例:   逻辑思路: 1.先把文本按空格切分成每个单词    flatMap() 2.将每个单词都转换成Tuple2类型(hello ,1)    map() 3.将 ...

  6. Eratosthenes筛法

    复杂度为nlogn. 算法思想为:枚举1~sqrt(n),然后把每一个数的倍数都都打上不是素数的标记. 还要特别注意0,1不是素数,打标记枚举到i*k<=n. 代码如下 #include< ...

  7. git diff 命令介绍

    https://www.jianshu.com/p/6e1f7198e76a https://www.jianshu.com/p/5b6a014ac3db https://blog.csdn.net/ ...

  8. java实现spark常用算子之groupbykey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  9. 19 Python之面向对象(成员)

    1. 成员 在类中你能写的所有内容都是类的成员 2. 变量 1. 实例变量: 由对象去访问的变量. class Person: def __init__(self, name, id, gender, ...

  10. LVS、Nginx及HAProxy

    本文转载自 linkedkeeper.com   当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群, ...