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属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
随机推荐
- 论文学习02-《On the Effectiveness of Visible Watermarks》
I. Estimating the Matted Watermark 给定所有图像中的水印当前估计的区域,我们通过观察这些区域图像梯度的一致性来检测出水印梯度,也就是我们通过计算这些区域的图像梯度的中 ...
- MySQL数据库的基本语法
1.MySQL数据类型数值以及浮点型介绍 2.MySQL数据类型之字符串介绍 常用的有:char.varchar.text. 3.MySQL数据类型之时间类型介绍 常用的是:timestampt,将时 ...
- Centos6 安装完之后，没有网络
Virtualbox安装的centos 6.10的虚拟机,安装时,网络是NAT网络,安装完之后,将网络改为桥接网卡,启动虚拟机之后,使用 ifconfig 命令查看没有到eth0的信息,只有127.0 ...
- Image 释放
你是用 Image.FromFile取的图片吧,这个方法会锁定图片文件. 有几种方法解决:一:System.Drawing.Image img = System.Drawing.Image.FromF ...
- div+css对网页进行布局
div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...
- jQuery ajax - post() 方法
实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("i ...
- （转）Android开发把项目打包成apk
转:http://blog.csdn.net/luoyin22/article/details/7862742 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们 ...
- manacher/马拉车常用用法一览
因为manacher算法把原来的字符串扩大了两倍,因此在应用时许多二级结论都非常不直观,现场推出来很麻烦,因此笔者在此做个简单整理,如果发现有错误或者有常用的我没有涉及到的,恳请在下方评论区指出,我会 ...
- clipboard.js操作剪贴版——一些移动端交互和兼容经验
https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...
- input 不显示输入的历史记录
第一次在 input 输入后,下次就会自动显示输入历史记录,去掉这种默认效果的解决方案 <input name="username" type="text" ...