CSS样式表之background背景
【CSS常用背景属性】：background （缩写形式）
background-color：背景色
background-image：背景图 url中放图片地址，背景图和背景色同时存在时，背景图覆盖背景色
background-repeat：背景图的重复方式
属性： no-repeat不平铺，一般要选择不平铺；repeat-x水平平铺；repeat-y垂直平铺；repeat平铺（默认）
background-position：位置坐标、偏移量
》》指定位置：left、center、reight top、center、bottom;
当只写一个属性时，另一个默认居中
》》填写坐标：水平位置 垂直位置（像素/百分比）
当只写一个属性值时，默认写的是水平方向，另一个垂直居中
水平方向：正数右移 负数左移
垂直方向：正数下移 负数上移
使用百分比时，代表去掉图片后，剩余空白区域距离比例
background-clip：裁切背景图和背景色显示区域。
border-box从边框外边缘开始显示；
padding-box从边框内边缘开始显示；
content-box从文字内容区开始显示；不在显示区域的背景图或背景色，会被裁切不显示
不改变定位位置，只是通过裁切显示部分区域
background-origin：设置背景图的定位方式。
border-box从边框外边缘开始；
padding-box从边框内边缘开始；
content-box从文字内容区开始
不改变背景图显示区域大小，只决定左上角定位位置
background-size:宽 高
【指定宽高】①直接写像素 ②百分比
》》当只有一个属性值时，默认为宽度、高度等比缩放
当有两个属性时，会按照指定的高度宽度进行压缩/拉伸处理
【其他属性值】
》》contain:图片等比缩放，缩放到宽或高的某一边等于父容器为止，另一边按比例缩放（可能导致部分空余区域无法覆盖）
》》cover:图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）
<head>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
border: 20px solid greenyellow;
background-color: red;
background-image: url(练习用图/rBACFFIdyU2hFpbmAAAe2AYDs5o148_200x200_3.jpg);
/*背景图覆盖背景色*/
background-repeat: no-repeat;
/*background-size: cover;*/
/*background-position: center;*/
background-position: 60px 10px;
}
.div2{
width: 300px;
height: 300px;
background-color: red;
padding: 30px;
border: 20px blue dotted;
background-image: url(练习用图/caccdb85f2881a0b!200x200.jpg);
background-repeat: no-repeat;
background-origin: content-box;
background-clip: padding-box;
}
#ul{
width: 1000px;
} </style>
</head>
<body>
<div class="div1"> </div>
<div class="div2"> 什么能坚持坚持坚持坚持坚持坚持坚持几年男方女方你快点快点康复费能否
</div> </body>
CSS样式表之background背景的更多相关文章
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- HTML基础（三）——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
随机推荐
- 精准准确的统一社会信用代码正则(js)
参照标准: <GB_32100-2015_法人和其他组织统一社会信用代码编码规则.> 按照编码规则: 统一代码为18位,统一代码由十八位的数字或大写英文字母(不适用I.O.Z.S.V)组成 ...
- 一步步学习EF Core(3.EF Core2.0路线图)
前言 这几天一直在研究EF Core的官方文档,暂时没有发现什么比较新的和EF6.x差距比较大的东西. 不过我倒是发现了EF Core的路线图更新了,下面我们就来看看 今天我们来看看最新的EF Cor ...
- 《一起》Alpha版软件使用说明
1.引言 1.1编写目的 本手册是软件工程概论团队项目<一起>的Alpha版使用说明,面向的对象群体为全校师生. 1.2项目背景 本项目由<软件工程概论>课程需求创建,软件由S ...
- 使用ThreadLocal实现的读写分离在迁移后的偶发错误
最近莫名的会有错误日志,说有写操作因为走了读库而报了read only的异常,由于并没有造成应用使用的问题,开始我以为哪的配置错误就没当回事让程序员自己去查了,然而... 背景:之前的博客里提到过,读 ...
- 基于binlog来分析mysql的行记录修改情况（python脚本分析）
最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...
- jQuery对象的创建（一）
在jQuery的常规用法中,执行"$()"返回的是一个jQuery对象,在源码中,它是这样定义的: ... var jQuery = function() { return new ...
- 细说Linux权限
目录: 归属权与访问权 chmod:访问权限设置 chown:所属权限设置 umask:权限掩码 隐藏属性 chattr:写保护.误删保护 单独限权 setfacl 一.归属和访问权限简介 1.归属( ...
- MyEclipse使用技巧详解
MyEclipse使用技巧的掌握是和我们开发效率挂钩的,那么如何掌握MyEclipse使用技巧呢?这里向你详细介绍了几种使用技巧的操作方法. 在了解MyEclipse使用技巧之前我们来看看MyEcli ...
- eclipse如何导入项目和文件
在左侧创建项目区,右击鼠标-->选择Import-–>General-> Existing Projects into workPlace-->选择最下方Next-->点 ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...