CSS3_盒子背景
盒子背景
盒子背景: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_盒子背景的更多相关文章
- CSS3全览_文本+视觉+盒子+背景颜色
CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...
- 用JS 写一个简单的程序,切换七彩盒子背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- css的三个特性 背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
- html5——背景
背景大小 background-size: % %;//宽 高 background-size: 100px 100px;//宽 高 background-size: cover;//覆盖,图片会完全 ...
- 前端开发CSS3——文本样式和盒子及样式
博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome: http://fontaw ...
- CSS——背景及应用
CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...
- Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制
布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person() Person{ name:'', getname( ...
- 0016 CSS 背景:background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
随机推荐
- Entity Framework入门教程(1)---Entity Framework简介
什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...
- Visual Studio图形调试器详细使用教程(基于DirectX11)
前言 对于DirectX程序开发者来说,学会使用Visual Studio Graphics Debugger(图形调试器)可以帮助你全面了解渲染管线绑定的资源和运行状态,从而确认问题所在.现在就以我 ...
- NOI-OJ 2.2 ID:1696 逆波兰表达式
思路 很容易看出规律,一个运算符出现,其后就一定需要左值和右值,而左值和右值有可能还是运算符,这就需要继续递归.递归终止的条件就是遇到数字. 逆波兰表达式其实是构造成了一颗二叉树 例程 #includ ...
- Spark 用户自定义函数 Java 示例
Spark UDF Java 示例 在这篇文章中提到了用Spark做用户昵称文本聚类分析,聚类需要选定K个中心点,然后迭代计算其他样本点到中心点的距离.由于中文文字分词之后(n-gram)再加上昵称允 ...
- C#中访问私有成员技巧
源代码是别人的,你就不能修改源代码,只提供给你dll.或者你去维护别人的代码,源代码却有丢失.这样的情况如果你想知道私有成员的值,甚至去想直接调用类里面的私有方法.那怎么办呢?其实在.net中访问私有 ...
- 使用VS的生成事件命令行指令将生成的exe,dll文件复制到指定文件夹中
VS预生成事件命令行 和 生成后事件命令行 宏说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) ...
- 项目实战 redis 缓存
1 首先在你的项目中,引用以下ServiceStack.Redis相关的四个类库.或者通过Nuget进行安装Redis常用组件ServiceStack.Redis. 下载示例代码. 2. 创建一个Re ...
- Spring系列(五) 容器初始化过程源码
IoC/DI 的概念 容器是Spring的核心之一(另一个核心是AOP). 有了容器, IOC才可能实现. 什么使IoC? IoC就是将类自身管理的与其由依赖关系的对象的创建/关联和管理交予容器实现, ...
- [dts]Device Tree机制【转】
转自:https://www.cnblogs.com/aaronLinux/p/5496559.html 转自:http://blog.csdn.net/machiner1/article/detai ...
- java学习笔记01-环境配置
需要先下载java的jdk,jdk是java的开发工具包,jre是java的运行环境,jdk里面都会带有jre的. 打开www.java.com,点击免费下载就行.之后默认安装就行了 1.设置JAVA ...