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 ...
随机推荐
- java企业架构 spring mvc +mybatis + KafKa+Flume+Zookeeper
声明:该框架面向企业,是大型互联网分布式企业架构,后期会介绍linux上部署高可用集群项目. 项目基础功能截图(自提供了最小部分) 平台简介 Jeesz是一个分布式的框架,提供 ...
- 深入理解Struts2----数据校验
在表现层的数据处理方面主要分为两种类型,一种是类型转换,这点我们上篇已经简单介绍过,另外一种则是我们本篇文章将要介绍的:数据校验.对于我们的web应用,我们经常需要和用户进行交互收集用户信息,那么无论 ...
- carryLess小笔记001_Java中16进制与字符串之间的相互转换
笔者前几日在开服过程中需要将字符串转化成为16进制的字符串,在网上找到了一些方法尝试之后,均发现存在一个问题-->字符串转为16进制后再转回来,英文正常,中文出现乱码 经过考虑决定通过以下方式进 ...
- 分辨率、像素和PPI
屏幕尺寸是指屏幕对角线的长度,一般以英寸为单位,1英寸(inch)=2.54厘米(cm).传统意义上的照片尺寸也是这个概念.所以同样尺寸(指对角线)的屏幕,也可能长宽比率不同.像素(Pixel):是位 ...
- Spring Cloud 声明式服务调用 Feign
一.简介 在上一篇中,我们介绍注册中心Eureka,但是没有服务注册和服务调用,服务注册和服务调用本来应该在上一章就应该给出例子的,但是我觉得还是和Feign一起讲比较好,因为在实际项目中,都是使用声 ...
- CentOS6.7 防火墙规则（Iptables)
查看防火墙的状态 /etc/init.d/iptables status 开启防火墙 /etc/init.d/iptables start 关闭防火墙 /etc/init.d/iptables sto ...
- web 直播&即时聊天------阿里云、融云（二）
上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...
- 【charger battery 充電 充電器 電池】過充保護警告訊息 over charging protection，Battery over voltage protection， warning message
Definition: over charging protection.battery over voltage protection, 是一種 battery 保護機制, 避免 battery 充 ...
- mysql之 日志体系（错误日志、查询日志、二进制日志、事务日志、中继日志）
一. mysql错误日志:错误日志记录的事件:a).服务器启动关闭过程中的信息b).服务器运行过程中的错误信息c).事件调试器运行一个事件时间生的信息d).在从服务器上启动从服务器进程时产生的信息lo ...
- Java之线程同步练习
1.有一张银行卡:*属性:name,money(账户余额)* 多线程操作同一张银行卡: 金额:x(每次存钱取钱的数额,取钱时x为负数,存钱时x为整数) 定义一个add方法:用于存取钱,参数为x,即每次 ...