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属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
随机推荐
- SSM项目配置文件DEMO
SSM相关配置文件 <spring-mvc.xml>文件 <?xml version="1.0" encoding="UTF-8"?> ...
- 同步图计算实现pageRank算法
pageRank算法是Google对网页重要性的打分算法. 一个用户浏览一个网页时,有85%的可能性点击网页中的超链接,有15%的可能性转向任意的网页.pageRank算法就是模拟这种行为. Rv:定 ...
- Java 多线程 - ThreadLocal
ref: https://www.cnblogs.com/chengxiao/p/6152824.html
- Java 多线程 - 原子操作AtomicInteger & CAS(Compare-and-Swap)
原子类简介:https://www.cnblogs.com/stephen0923/p/4505902.html AtomicInteger 介绍: https://yuwenlin.iteye.co ...
- System.Web.Mvc.RouteAttribute.cs
ylbtech-System.Web.Mvc.RouteAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...
- 记录一次hexo托管到coding失败，页面总是404，可是相同的代码托管到github是没问题的。
文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...
- 在github上怎样克隆vue项目及运行
长时间不做vue项目,今天看vue项目运行时有些指令忘记了,在这里写下相关指令 .克隆已有项目,一般情况项目中的README.md写的是项目运行步骤,一般项目的运行如下 克隆项目 git clone ...
- 如何将数组2对象中的属性push进数组1的对象中去，组合成新的数组
- Docker配置JDK1.8
1.安装Docker(菜鸟教程有) https://www.runoob.com/docker/centos-docker-install.html 2.docker下载centos镜像(用作配置jd ...
- &卡特兰数学习笔记
一.关于卡特兰数 卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1, 2, 5, 14, 42, 132, 429, 1430, 4862, 16796, 58786, 20801 ...