css3-11 如何改变背景图片的大小和位置

一、总结

一句话总结：css3相对css2本身就支持改变背景图片的大小和位置。

1、怎么设置背景不填充padding部分？

background-origin
3)content-box
#有效区域

18             background-origin:content-box;

2、如何改变背景图片的大小？

background-size属性

17             background-size:100%;

background-size:100% 100%;

3、背景如何使用多重图？

url可以累加

body

{

    background-image:url(img_flwr.gif),url(img_tree.gif);

}

4、如何裁剪背景图片？

background-clip属性，这个方法的属性值和background-origin一样
background-clip: content-box;

5、background-origin和background-clip设置背景图的区别（都限定了背景图出现的位置）？

一个裁剪了背景图，一个背景图还是原图，只是 放的位置不同了，缩放比例不同而已

二、如何改变背景图片的大小和位置

1、相关知识

背景样式:
1.background-size
background-size:100%;
#背景图大小

2.background-origin
1)border-box
#边框区域
2)padding-box
#内边距区域
3)content-box
#有效区域

新的背景属性

顺序 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

2、代码

背景图大小和位置

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         div{

             width:500px;

             height:500px;

             border:10px solid transparent;

             padding:10px;

             background:url('b.png') no-repeat;

             background-size:100%;

             background-origin:border-box;

         }

     </style>

 </head>

 <body>

     <div>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

     </div>

 </body>

 </html>

裁剪背景图

<style>

#example1 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

}

#example2 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: padding-box;

}

#example3 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: content-box;

}

</style>

 

css3-11 如何改变背景图片的大小和位置的更多相关文章

  1. CSS3设置背景图片的大小

    设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...

  2. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  3. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

  4. background-size （设置背景图片的大小）

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  5. atitit.自适应设计悬浮图片的大小and 位置

    atitit.自适应设计悬浮图片的大小and 位置 #--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:- ...

  6. MFC中改变控件的大小和位置

    用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  7. MFC中改变控件的大小和位置(zz)

    用CWnd类的函数MoveWindow()或SetWindowPos()能够改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  8. 3.css3中多个背景图片的用法

    (background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...

  9. android 中ImageButton按下改变背景图片的效果

    最近在做一个app的登陆界面,才发现原来认为很简单的UI效果,其实背后却蕴含的知识很多,积累一个算一个吧. 实现方法有两种:一种是添加代码,一种是配置xml文件. 方法一:代码添加 ImageButt ...

随机推荐

  1. 商业模式(二):P2P网贷平台，利差和服务费为主的金融玩法

    2014~2015,先后在2家P2P平台工作过,还了解过其它若干武汉P2P平台. 结合自己的工作经历和理财经历,说几句~ 1.P2P网贷这种金融类的创业项目和经营风险,远高于制造业和服务业~      ...

  2. 03005_SQL查询语句

    查询语句,在开发中使用的次数最多,此处使用“zhangwu” 账务表. 1.准备工作 (1)创建财务表: CREATE TABLE zhangwu ( id INT PRIMARY KEY AUTO_ ...

  3. 【2017 Multi-University Training Contest - Team 2】TrickGCD

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6053 [Description] 给你一个b数组,让你求一个a数组: 要求,该数组的每一位都小于等 ...

  4. 【Uva 1632】Alibaba

    [Link]: [Description] 直线上有n(n≤10000)个点,其中第i个点的坐标是xi,且它会在di秒之后消失.Alibaba 可以从任意位置出发,求访问完所有点的最短时间.无解输出N ...

  5. IIS发布asp.net mvc项目(asp.net core也是一样)

    因为之前都是利用其他的工具在linux上面进行发布,导致现在忘记了在IIS上面怎么发布,现在就记录下来,以防不时之需吧 第一步: 在vs里面进行项目发布:指定好发布的位置,点击发布就好了 第二步:右击 ...

  6. 7.Linux 输入子系统分析

    为什么要引入输入子系统? 在前面我们写了一些简单的字符设备的驱动程序,我们是怎么样打开一个设备并操作的呢? 一般都是在执行应用程序时,open一个特定的设备文件,如:/dev/buttons .... ...

  7. Hadoop学习小结

    还在学校的时候,就知道Hadoop的存在了. 2012年在公司实习的时候,买了<Hadoop权威指南第2版>,大致看了下. 今年,抽空也大致喵了几眼. 最大的感悟就是:光看不做,还是不行. ...

  8. 【MySQL集群】——Java程序连接MySQL集群

    上篇简介了怎样在Windows环境下建立配置MySQL集群,这里用一个实现注冊功能的小Demo通过jdbc的方式连接到MySQL集群中. 外部程序想要远程连接到mysql集群,还须要做的一个操作就是设 ...

  9. bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug，如何解决这个问题

    bootstrap课程13  bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题 一.总结 一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了 ...

  10. amazeui学习笔记二（进阶开发1）--项目结构structure

    amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...