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属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
随机推荐
- Mysql优化-概述
摘抄并用于自查笔记 为什么要优化 一个应用吞吐量瓶颈往往出现在数据库的处理速度上. 随着应用程序的使用,数据库数据逐渐增多,数据库处理压力逐渐增大. 关系型数据库的数据是存放在磁盘上,读写速度慢(与内 ...
- Navicat Premium_11.2.7 安装及破解，连接Oracle数据库
下载Navicat Premium_11.2.7简体中文版, 安装 Navicat 11 for Windows 系列原版程序.Navicat | 下载 Navicat 14 天 Windows.Ma ...
- BCZM : 1.8
问题: 所有的员工均在1楼进电梯的时候,选择所要到达的楼层.然后计算出停靠的楼层i,当到达楼层i的时候,电梯停止.所有人走出电梯,步行到所在的楼层中.求所有人爬的楼层数目和的最小值. 解法一 ...
- leetcode-240-搜索二维矩阵②
题目描述: 最佳方法:O(m+n) O(1) class Solution: def searchMatrix(self, matrix, target): if not matrix : retur ...
- Java 多线程 - synchronized与Lock的区别
https://blog.csdn.net/qq_39521554/article/details/81130442 http://www.cnblogs.com/huangbw/p/8516024. ...
- js 当前时间和对比时间的比较
<!DOCTYPE><html> <head> <meta charset="utf-8" /> <title>功能:当 ...
- System.Web.Mvc.ActionResult.cs
ylbtech-System.Web.Mvc.ActionResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Publi ...
- latex ctex 的section不能写中文， /href
问题描述:再使用超链接 /href 后发现section{}不能写入中文,以前是好使的,经过查询验证,需要在引导区里加入 \hypersetup{CJKbookmarks=true} 即可恢复正常.
- 愚人节老板发话了，免费送书 + 免费入驻Java知识星球！！
愚人节快乐,今天的活动很重磅! 1.免费送5本重量级技术书籍,不骗人,小程序随机抽奖送出哦! 2.免费进星球,哈哈不可能,愚人节快乐!不过今天有重大优惠,见下文! 活动一:免费送出5本重量级书籍 赠书 ...
- 16.ajax_case06
# 抓取华尔街见闻实时快讯 # https://wallstreetcn.com/live/global?from=navbar import requests import json header ...