CSS基础-background的那些属性
background的那些属性
background:背景的意思
常用的六个属性
1.background-color:背景颜色
2.background-image:背景图像
3.background-position:图片位置
4.background-repeat:图片是否重复
5.background-attachment:图片定位（fixed，scroll）
6.background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;
疑惑点1:图像和颜色到底是从边框开始的？还是从内容开始的？
解答：背景图像和颜色默认是从border开始铺上去的。如果没有border就从下一级开始。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #000;
}
#box{
width: 100px;
height:100px;
background: url(../../image/1.jpg);
padding: 50px;
border:10px dashed
rgba(255,255,255,.5);/*将边框设置透明度，目的是查看是否从边框开始平铺的*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>运行效果图：
疑惑点2:如果想设置图像开始的位置怎么办？
解答：
background-clip: 背景裁剪。有三个属性值为
border-box（图片或者颜色从边框开始）;
padding-box（图片或者颜色从padding部分开始）;
content-box图片或者颜色从content部分开始）;
疑惑点3:background-position的属性值有那些写法？
解答：定位是从border的左上角开始。background-position：x,y;第一个值是距离左边的距离
第二个值是距离上边的距离
x:left,center,right
y:top,center,bottom
background-position：10px; 只有一个值时，默认第二个值是center
background-position：10px bottom;
background-position: bottom 10px ;当存在数值的时候，顺序写错则不显示。存在数值时顺序必须写对。要按照前面是x值，后面是y值来写。eg：background-position: 10px bottom ;才正确。
background-position: bottom right;当不存在数值的时候，顺序无所谓。
疑问4: background的复合属性如何写呢?
解答：background:先考虑是否图片重复，在考虑位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
border:10px solid pink;
padding: 50px;
background:url(../../image/1.jpg) no-repeat center content-box;
;
}
</style>
</head>
<body>
<div class="box"></div>
<!--background:先考虑是否图片重复，在考虑位置-->
</body>
</html>
效果图为：
CSS基础-background的那些属性的更多相关文章
- CSS基础知识之文本属性二三事
line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-si ...
- HTML+css基础 img 标签的属性
img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...
- CSS基础 列表相关的属性的使用
1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点 ...
- CSS基础-行快属性，hover
CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性. 块标签 div,ul,li,ol,h1~h6,p 可 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础以及属性
一.CSS 偷个懒,啥是CSS我就不介绍啦 二.CSS语法 CSS语法:选择符{属性:属性值:属性:属性值:}选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.属性:属性 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
随机推荐
- 剑指Offer编程题（Java实现）——链表中倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 注意: 该题目不可以用先反转链表再输出第k个结点的方式,因为反转链表会改变该结点的next指向 思路一 使用栈Stack倒序存储,顺序pop第k个 ...
- redis 教程(一)-基础知识
redis 简介 redis 是高性能的 key-value 数据库,读的速度是110000次/s,写的速度是81000次/s ,它以内存作为主存储 具有以下优点: 1. 支持数据的持久化,将内存中的 ...
- 通过编写串口助手工具学习MFC过程——（五）添加CheckBox复选框
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- some problem
CF1257F Make Them Similar $solution:$ 折半搜索后考虑如何维护两个数组的和,可以将 $A$ 中每个数减 $A_1$ ,$B$ 中每个数被减 $B_1$ ,$map$ ...
- [51Nod1850] 抽卡大赛
link $solution:$ 朴素 $dp$,暴力枚举选择 $i$ 号人的第 $j$ 张卡片,朴素 $dp$ 即可,时间复杂度 $O(n^4)$ . 考虑对于朴素 $dp$ 的优化,发现其实是一个 ...
- Linux安装Jenkins并部署springboot项目
安装步骤: 1.跳转连接https://pkg.jenkins.io/redhat-stable/下载安装包 2.安装命令: sudo rpm -ih jenkins-2.73.2-1.1.noarc ...
- 【学习总结】快速上手Linux玩转典型应用-第4章-准备工作
课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 准备工作一 2. 准备工作二 ===================================================== ...
- js工厂函数创建对象与对象构造函数的理解
工厂函数,顾名思义,就是通过一个＂工厂的加工＂ 来创建一个对象的函数 //工厂函数 function createPerson(name,sex){ sex = sex == '男' ? '女' : ...
- ab压测
安装:yum install -y httpd-tools 验证:ab -V ab -help:-n requests 要执行请求总数,默认会执行一个请求 -c concurrency 一次执行多个请 ...
- MySQL索引优化与分析（重要）
建表SQL CREATE TABLE staffs ( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NULL DEFAULT '' COM ...