盒子背景

盒子背景:content    padding    特殊的 boder 背景

背景绘制 从 padding 开始绘制

  • 背景裁剪 background-clip(默认值 border-box)

特殊: 在指定文字背景时 -webkit-background-clip: text;

  • 可选值:

    • border-box    默认值,从 padding 左上角开始绘制,border 单独绘制
    • padding-box    不绘制 border,从 padding 左上角开始绘制
    • content-box    不绘制 border,padding,从 content 左上角开始绘制
  • 背景原始其实位置 background-origin(默认值 padding-box)
  • 可选值:
    • padding-box 默认值,从 padding 左上角开始绘制,border 单独绘制
    • border-box    从 border 左上角开始绘制
    • content-box    从 content 左上角开始绘制
  • 与 background-position 的联系: background-origin 指定了 background-position(0,0)起始位置

    • background-origin: padding-box 时,background-position 的(0, 0)点为 padding
    • background-origin: border-box 时,background-position 的(0, 0)点为 border
    • background-origin: content-box 时,background-position 的(0, 0)点为 content
  • 设置背景图片的大小 background-size: px / % / cover / contain;
  • background-size: px;
    • #box {
      width: 300px;
      height: 300px;
      bakground-image: url(./img/a.jpg); /* width height 如果只写一个值,第二个值根据宽高比自动计算*/
      background-size: 100px 100px;
      }
  • background-size: %;

    • #box {
      width: 300px;
      height: 300px;
      bakground-image: url(./img/a.jpg); /* 参照于盒子自身的 width height 如果只写一个值,第二个值根据宽高比自动计算*/
      background-size: 100% 100%;
      background-size: 20%;
      }
  • background-size: cover;    将图片以容器最远边进行缩放

    • #box {
      width: 300px;
      height: 200px;
      bakground-image: url(./img/a.jpg); /* 拉伸效果: 根据最远边进行伸缩调节 */
      background-size: cover;
      }

  • background-size: contain;

    • #box {
      width: 300px;
      height: 200px;
      bakground-image: url(./img/a.jpg); /* 拉伸效果: 根据最近边进行伸缩调节 */
      background-size: contain;
      }

  • 多重背景 background-image: url(./img/a.png), url(./img/b.png), url(./img/c.png)... ...
  • 需要使用 png 带透明的背景图
  • 前面的图片会 覆盖后面的图片
  • #box {
    width: 300px;
    height: 200px; background-repeat: no-repeat; background-image: url("img/niu.png") , url("img/cao_bg.png") ; }
  • 模糊背景 (CSS3 过滤器: filter)
  • #bg {
    width:
    height: 480px; overflow: hidden; /* 隐藏模糊溢出 */
    } #bg img {
    width: 320px;
    height: 480px filter: blur(5px);
    } #content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 320px;
    height: 480px;
    }

CSS3_盒子背景的更多相关文章

  1. CSS3全览_文本+视觉+盒子+背景颜色

    CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...

  2. 用JS 写一个简单的程序,切换七彩盒子背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  4. css的三个特性 背景透明设置

    关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...

  5. html5——背景

    背景大小 background-size: % %;//宽 高 background-size: 100px 100px;//宽 高 background-size: cover;//覆盖,图片会完全 ...

  6. 前端开发CSS3——文本样式和盒子及样式

    博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontaw ...

  7. CSS——背景及应用

    CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...

  8. Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制

    布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person()      Person{   name:'', getname( ...

  9. 0016 CSS 背景:background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

随机推荐

  1. Entity Framework入门教程(1)---Entity Framework简介

    什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...

  2. Visual Studio图形调试器详细使用教程(基于DirectX11)

    前言 对于DirectX程序开发者来说,学会使用Visual Studio Graphics Debugger(图形调试器)可以帮助你全面了解渲染管线绑定的资源和运行状态,从而确认问题所在.现在就以我 ...

  3. NOI-OJ 2.2 ID:1696 逆波兰表达式

    思路 很容易看出规律,一个运算符出现,其后就一定需要左值和右值,而左值和右值有可能还是运算符,这就需要继续递归.递归终止的条件就是遇到数字. 逆波兰表达式其实是构造成了一颗二叉树 例程 #includ ...

  4. Spark 用户自定义函数 Java 示例

    Spark UDF Java 示例 在这篇文章中提到了用Spark做用户昵称文本聚类分析,聚类需要选定K个中心点,然后迭代计算其他样本点到中心点的距离.由于中文文字分词之后(n-gram)再加上昵称允 ...

  5. C#中访问私有成员技巧

    源代码是别人的,你就不能修改源代码,只提供给你dll.或者你去维护别人的代码,源代码却有丢失.这样的情况如果你想知道私有成员的值,甚至去想直接调用类里面的私有方法.那怎么办呢?其实在.net中访问私有 ...

  6. 使用VS的生成事件命令行指令将生成的exe,dll文件复制到指定文件夹中

    VS预生成事件命令行 和 生成后事件命令行 宏说明 $(ConfigurationName)            当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir)   ...

  7. 项目实战 redis 缓存

    1 首先在你的项目中,引用以下ServiceStack.Redis相关的四个类库.或者通过Nuget进行安装Redis常用组件ServiceStack.Redis. 下载示例代码. 2. 创建一个Re ...

  8. Spring系列(五) 容器初始化过程源码

    IoC/DI 的概念 容器是Spring的核心之一(另一个核心是AOP). 有了容器, IOC才可能实现. 什么使IoC? IoC就是将类自身管理的与其由依赖关系的对象的创建/关联和管理交予容器实现, ...

  9. [dts]Device Tree机制【转】

    转自:https://www.cnblogs.com/aaronLinux/p/5496559.html 转自:http://blog.csdn.net/machiner1/article/detai ...

  10. java学习笔记01-环境配置

    需要先下载java的jdk,jdk是java的开发工具包,jre是java的运行环境,jdk里面都会带有jre的. 打开www.java.com,点击免费下载就行.之后默认安装就行了 1.设置JAVA ...