一、多重背景图片

①CSS3允许我们在一个元素上添加多个图片

②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的位置

<div class="box"></div>
  .box{
  width: 600px;
  height: 200px;
  border: 1px solid #000;
  background: url('1.jpg') no-repeat,url('2.jpg') no-repeat 200px 0,url(‘3.jpg’) no-repeat 400px 0;
}

二、图片起始位置background-origin

①background-origin允许我们定义图片从哪儿开始定位,可选的属性值padding-box(默认)、border-box、content-box

②padding-box默认图片从内边距开始

<div class="box"></div>
        .box{
width: 600px;
height: 200px;
border: 50px solid #ccc;
background: url('1.jpg') no-repeat;
background-origin: padding-box;
}

③border-box定义图片从边框开始

<div class="box"></div>
        .box{
width: 600px;
height: 200px;
border: 50px solid rgba(0, 0, 255, 0.5);
background: url('1.jpg') no-repeat;
background-origin: border-box;
}

④content-box定义从元素的内容部分为起始位置

<div class="box"></div>
        .box{
width: 600px;
height: 200px;
border: 50px solid #ccc;
background: url('1.jpg') no-repeat;
background-origin: content-box;
padding: 50px;
}

三、图片裁剪background-clip

①即使背景图的起始位置设置为内容区 ,但这不代表图片就被限制在内容区 ,在整个元素边框及边框以内都是可以绘制的 (去掉了no-repeat)

<div class="box"></div>
        .box{
width: 600px;
height: 200px;
border: 50px solid rgba(0, 0, 255, 0.6);
background: url('1.jpg');
background-origin: content-box;
padding: 50px;
}

②使用background-clip属性 ,可以裁剪图片,设置图片显示范围,与content-origin的属性值类似 ,有padding-box(默认)、border-box、content-box

<div class="box"></div>
        .box{
width: 600px;
height: 200px;
border: 50px solid rgba(0, 0, 255, 0.6);
background: url('1.jpg');
background-origin: content-box;
padding: 50px;
background-clip: content-box;
}

四、图片尺寸background-size

①两个像素值控制宽高

        .box{
width: 600px;
height: 200px;
border: 1px solid #ccc;
background: url('1.jpg') no-repeat;
background-size: 100px 300px
}

②写一个像素值就代表宽和高像素相同

        .box{
width: 600px;
height: 200px;
border: 1px solid #ccc;
background: url('1.jpg') no-repeat;
background-size: 100px
}

③cover是覆盖整个区域,在这个例子中宽度会占满

        .box{
width: 600px;
height: 200px;
border: 1px solid #ccc;
background: url('1.jpg') no-repeat;
background-size: cover;
}

④contain是保证图片在区域内最大显示,在这个例子中高度会占满

        .box{
width: 600px;
height: 200px;
border: 1px solid #ccc;
background: url('1.jpg') no-repeat;
background-size: contain;
}

CSS3背景图片(多重背景、起始位置、裁剪、尺寸)的更多相关文章

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

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  2. 【Multiple backgrounds】用CSS3实现网页多重背景

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式).background-positio ...

  3. 设置UINavigation的背景图片和背景颜色

    //通过背景图片来设置背景 float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue]; UIImage * ...

  4. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  5. HTML连载32-背景颜色、背景图片、背景填充

    一.背景 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值:,就是专门用来设置标签的背景颜色. (2)取值:具体单词.RGB.RGBA.十六进制 例子: &l ...

  6. 用Js+css3实现图片旋转,缩放,裁剪,滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...

  7. div可以同时设置背景图片和背景颜色吗?

    前言 当然可以同时设置 当图片背景色不透明时 情况一:当图片的长.宽 >= div的长.宽时 我们最终看到div背景是图片,之所以说是最终看到,是因为在页面加载时,我们先看到的div背景是颜色, ...

  8. CSS同时使用背景图片和背景颜色

    background:url(../images/bg.jpg) #F3EFE5 no-repeat ;

  9. css(字体,文本,边距,边框,阴影,背景,渐变,多重背景,列表)

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

随机推荐

  1. MySql5.7 json查询

    create table t1(name json); insert into t1 values(’ { “hello”: “song”, “num”: 111, “obj”: { “who”: “ ...

  2. Docker 安装入门 Centos Linux安装Docker 部署mysql

    这次购买了阿里云云服务器,并且安装了Centos 7.5 学习使用Docker, 确认版本信息 Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上. Dock ...

  3. IIS7 URL重写如何针对二级域名重写

    二级域名与站点主域名是绑在同一目录下,想实现访问二级域名重写至站点下的某个目录.  如:  访问so.abc.cn 实际访问的是站点根目录下的search目录下的文件 相当于so.abc.cn绑定至s ...

  4. C#中的委托、事件及事件的订阅

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. Shallow copy and Deep copy

    Shallow copy and Deep copy 第一部分: 一.来自wikipidia的解释: Shallow copy One method of copying an object is t ...

  6. unity 实现技能释放

    要实现技能释放其实很简单,说白了就是在指定的位置Instantiate一个对应的例子特效.我走的弯路主要在寻找这个指定位置上. 对于指向性技能就不多说了,因为是有确切目标的(当然首先判断下技能能不能对 ...

  7. java服务端集成极光消息推送--详细开发步骤

    1.极光推送账号准备 要使用极光消息推送必须先在官方网站上注册账号,并添加应用. 产品介绍:https://docs.jiguang.cn/jpush/guideline/intro/ 注册开发者账号 ...

  8. linux安全加固项目

    分享一个Linux加固脚本项目,可快速对服务器进行安全加固,顺便做下备忘,安全人员必须熟悉运维相关的知识! 支持的操作系统平台: Amazon 2013.03 Amazon 2013.09 Amazo ...

  9. Node.js 入门到干活,10 个优质项目就够了!

    Node.js 在很多大公司都有不错的实践,比如:淘宝.天猫 Web 版,很多页面都是在 Node 服务器上渲染的.还有各种脚手架.前端打包发布工具.构建生态的小工具,也基本都是 Node.js 编写 ...

  10. linux设备驱动程序-i2c(1):i2c总线的添加与实现

    linux设备驱动程序-i2c(1):i2c总线的添加与实现 (基于4.14内核版本) 在上一章节linux设备驱动程序-i2c(0)-i2c设备驱动源码实现中,我们演示了i2c设备驱动程序的源码实现 ...