08-background详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>咸鱼联盟</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
.box{
width: 500px;
height: 300px;
padding: 100px;
border: 50px dotted blue;
background-color: deeppink;
background-image: url("img/1.jpg");
background-repeat: no-repeat;
background-size: 200px;
background-origin: padding-box;
background-attachment: fixed;
}
.box-two{
width: 200px;
height: 200px;
border: 20px dotted blue;
padding: 20px;
background-color: green;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box-two"></div>
<!--
background-image 插入一张图片
background-repeat 设置背景的平铺方式 默认repeat
background-position 控制背景图片的位置
background-position-x
left 和容器的左边对齐 0%
right 和容器的右边对齐 100%
center 在容器的中间 50%
background-position-y
top 和容器的上边对齐 0%
bottom 和容器的下边对齐 100%
center 在容器的中间 50%
background-position 如果只有一个值,那第二个值默认center
background-size 设置背景图片的大小
只有1个值等比例缩放 有2个值竖直方向、水平方向相对于外边盒子大小(%)
background-size: contain; 从左上角开始与原图等比例缩放直到触碰盒子边界(不会超出)
background-size: cover; 从左上角开始与原图等比例缩放直到盒子占满(超出)
background-clip: 设置背景颜色的绘制区域
content-box padding-box border-box
background-origin 设置背景图片的绘制区域
content-box padding-box border-box
background复合属性
background:pink url('img/1.jpg') no repeat 100px 100px / 50% 50%;
background-color background-image background-repeat
background-position/background-size
-->
</body>
</html>
08-background详解的更多相关文章
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式之background详解（格子效果）
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- JavaFx TableView疑难详解
TableView是个十分有用的控件,适应性和灵活性非常强,可以对它进行任意的修改,比如界面样式.功能.本文将从一步步提问的方式讲解TableView 创建已知列的TableView 已知列的表格的创 ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- 【夯实Mysql基础】MySQL在Linux系统下配置文件及日志详解
本文地址 分享提纲: 1. 概述 2. 详解配置文件 3. 详解日志 1.概述 MySQL配置文件在Windows下叫my.ini,在MySQL的安装根目录下:在Linux下叫my.cnf,该文件位于 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- 详解CSS float属性
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
随机推荐
- identifier of an instance of xx.entity was altered from xxKey@249e3cb2 to xxKey@74e8f4a3; nested exception is org.hibernate.HibernateException: identifier of an instance of xxentity was altered from错误
用entityManager保存数据时报错如下 identifier of an instance of xx.entity was altered from xxKey@249e3cb2 to xx ...
- Hadoop 平台搭建
一.在Linux中安装JDK并配置环境变量 输入javac 查看是否已安装java环境如果没有安装 sudo apt-get install openjdk-7-jdk再次检测 javac修改配置参数 ...
- PPM 信号解析
PWM信号 PWM信号用于控制单个电调或者单个舵机脉冲宽度调制信号. 像华科尔DEVO 10遥控接收器(RX1002)就输出10路PWM,参看下图. 舵机(电调)上用到PWM信号种类很多,我们这里对常 ...
- JVM 内存模型及垃圾回收
java内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 程序计数器:程序计数器是指CPU中的寄存器,它保存的是程序当前执行的指令的地址(也可以说 ...
- 关于ueditor 文本框
遇到一个问题,需要将从ueditor中的获得的带格式的文本,从数据库中取出,在放回到 ueditor中去,但是 文本中\n总是截断字符串,出现 这种情况,后面的字符就不能算到里面去了,程序就报错了. ...
- 面试系列12 redis和memcached有什么区别
(1)redis和memcached有啥区别 这个事儿吧,你可以比较出N多个区别来,但是我还是采取redis作者给出的几个比较吧 1)Redis支持服务器端的数据操作:Redis相比Memcached ...
- mvc中在cshtml页面中如何访问静态页面.html
把静态页面放到@Url.Content();中,如href="@Url.Content("a.html")"
- vue 返回上一页
参考:https://www.cnblogs.com/chenguiya/p/9118265.html 注:需为history模式 方法一: @click="back" back( ...
- CAS机制详解
目录 1. 定义 2. 实现原理 3. 无版本号CAS实战说明 4. CAS机制在Java中的应用 5. CAS的缺点 1. CPU开销过大 2. 不能保证代码块的原子性 3. ABA问题 6. JA ...
- Linux 下 Nand Flash 驱动说明
注册 driver_register 通过 module_init(s3c2410_nand_init);注册 Nand Flash 驱动. 在 s3c2410_nand_init ()中通过 dri ...