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的那些属性的更多相关文章

  1. CSS基础知识之文本属性二三事

    line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-si ...

  2. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

  3. CSS基础 列表相关的属性的使用

    1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点 ...

  4. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

  5. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  6. css的背景background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  7. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  8. CSS基础以及属性

    一.CSS 偷个懒,啥是CSS我就不介绍啦 二.CSS语法 CSS语法:选择符{属性:属性值:属性:属性值:}选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.属性:属性 ...

  9. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

随机推荐

  1. [转帖]CentOS 7 使用kubeadm 部署 Kubernetes

    CentOS 7 使用kubeadm 部署 Kubernetes   关闭swap 执行swapoff临时关闭swap. 重启后会失效,若要永久关闭,可以编辑/etc/fstab文件,将其中swap分 ...

  2. windows系统IO性能测试

    关键词:sql server io测试 下载链接:http://www.onlinedown.net/soft/57364.htm CrystalDiskMark(硬盘检测工具),一个测试你的硬盘或者 ...

  3. Java——LinkedList底层源码分析

    1.简介 LinkedList 是用链表结构存储数据的,很适合数据的动态插入和删除,随机访问和遍历速度比较慢.另外,他还提供了 List 接口中没有定义的方法,专门用于操作表头和表尾元素,可以当作堆栈 ...

  4. poj-1236.network of schools(强连通分量 + 图的入度出度)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 27121   Accepted: 10 ...

  5. dfs(最佳路径)

    http://acm.hdu.edu.cn/showproblem.php?pid=1242 Rescue Time Limit: 2000/1000 MS (Java/Others)    Memo ...

  6. js获取url中的参数(解决中文乱码)

    这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...

  7. Scrapy 教程(五)-分页策略

    scrapy 爬取分页网站的策略 1. 检测当前页是否存在“下一页” 2. 如果存在,把“下一页”的链接交给本方法或者其他方法 3. 如果不存在,结束 图示 示例代码 def parse(self, ...

  8. spring boot 枚举使用的坑2

    上一篇说到在枚举当在controller的方法做参数时的坑,解决方法是配置了一个converter,后来想想,如果不闲每次都加一个注解麻烦的话,可以在参数前面加一个注解,添加一个解析器应该也可以解决这 ...

  9. git的配置设置

    git的基本配置 git是一个版本控制工具,既然是工具,那么就可以根据人的个人喜好来进行设置,git也提供了配置,可以根据自己的喜好来对它进行个性化的设计,以让自己舒服的玩. git有三个配置文件 / ...

  10. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...