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属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
随机推荐
- (转)protobuf-----Mac 机器安装
转自: https://blog.csdn.net/u014534808/article/details/80203018 安装之旅 1. 下载protobufprotobuf下载页面 在此页面选择合 ...
- 多版本JDK 切换
由于一些原因,我本机存在3个版本的jdk. 但是发现,单纯去 修改环境变量,并没有效果. 那么我们下面看看怎么改 1 查看本机版本 java -version 2 查看jdk路径 where ...
- fuzzy commitment 和fuzzy vault
Alice,这位令人惊异的魔术天才,正表演关于人类意念的神秘技巧.她将在Bob选牌之前猜中Bob将选的牌!注意Alice在一张纸上写出她的预测.Alice很神秘地将那张纸片装入信封中并封上.就在人们吃 ...
- Python学习笔记（三）——文件系统中的常用方法
OS模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir() 改变工作目录 listdir(path='.') 列举指定目录中的文件名('.'表示当 ...
- css悬浮在页面顶端
.header{ position:fixed; margin-top:; width:%; z-index:; } .body{ position:relative; padding-top:119 ...
- 微服务配置中心实战：Spring + MyBatis + Druid + Nacos
在结合场景谈服务发现和配置中我们讲述了 Nacos 配置中心的三个典型的应用场景,包括如何在 Spring Boot 中使用 Nacos 配置中心将数据库连接信息管控起来,而在“原生”的 Spring ...
- Ubuntu下github pages+hexo搭建自己的博客
hexo 是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在github上.Hexo简单优雅, 而且风格多变, 适合搭建个人博客,而且支持多平台的搭建. 平台 Ubuntu14.04 ...
- 杂项-日志：日志（log）
ylbtech-杂项-日志:日志(log) 1.返回顶部 1. 概述 网络设备.系统及服务程序等,在运作时都会产生一个叫log的事件记录:每一行日志都记载着日期.时间.使用者及动作等相关操作的描述. ...
- 网络安全系列 之 SQL注入学习总结
目录 1. sql注入概述 2. sql注入测试工具 3. sql注入防御方法 3.1 问题来源 3.2 防御方法 4. SQL注入防御举例 4.1 使用JDBC时,SQL语句进行了拼接 4.2 使用 ...
- 13_springmvc拦截器应用
一.实现登录认证 1.需求: 用户请求url,拦截器进行拦截校验 如果请求的url是公开地址(无需登陆即可访问的url),让放行 如果用户session 不存在跳转到登陆页面 如果用户session存 ...