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（一）安装前准备工作

    centos系统启动文件详解: 注:在centos6里需要给NetworkManager服务关闭并且禁止开机启动,6和7里都需要将selinux关闭,否则会出现网络配置异常情况,并且要将防火墙关闭. ...

  2. 分布式事务解决方案汇总：2PC、3PC、消息中间件、TCC、状态机+重试+幂等（转）

    数据一致性问题非常多样,下面举一些常见例子.比如在更新数据的时候,先更新了数据库,后更新了缓存,一旦缓存更新失败,此时数据库和缓存数据会不一致.反过来,如果先更新缓存,再更新数据库,一旦缓存更新成功, ...

  3. 自动清理ES索引脚本

    #/bin/bash #指定日期(3个月前) DATA=`date -d "3 month ago" +%Y.%m.%d` #当前日期 time=`date` #删除3个月前的日志 ...

  4. 根据日志来源的不同生成不同的index索引

    使用filebeat收集系统日志,不同应用的日志,然后把这些日志传输给Logstash,再然后交由elasticsearch处理,那么如何区分不同的日志来源呢? filebeat.yml配置文件中不启 ...

  5. luogu P1232 [NOI2013]树的计数

    传送门 这题妙蛙 首先考虑构造出一个合法的树.先重新编号,把bfs序整成\(1,2,3...n\),然后bfs序就是按照从上到下从左往右的遍历顺序,所以可以考虑对bfs序分层,可以知道分层方式只会对应 ...

  6. 华为云搭建windows+wordpress+xampp

    1.如何将本地文件上传至华为云ECS云服务器(Windows系统) 1.1 在本地电脑上,快捷键“WIN+R"打开“运行”中输入“mstsc”,点击确定 1.2  在“远程桌面连接”框点击“ ...

  7. Java中静态变量和实例变量的区别

    静态变量属于类的级别,而实例变量属于对象的级别. 主要区别有两点: 1,存放位置不同 类变量随着类的加载存在于方法区中,实例变量随着对象的对象的建立存在于堆内存中. 2,生命周期不同 类变量的生命周期 ...

  8. linux中的文件类型以及查看文件类型的方法

    Linux文件类型和文件的文件名所代表的意义是两个不同的概念,在linux中文件类型与文件扩展名没有关系.它不像Windows那样是依靠文件后缀名来区分文件类型的,在linux中文件名只是为了方便操作 ...

  9. k3 cloud在站点中新增用户

    1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...

  10. vue.js-vuex深入浅出

    1:正确的创建目录 2:action.js 异步请求数据 3:index.js 文件声名 4:mutation.js 同步事务 修改state中的值 5:state.js 申明和保存变量或对象 6:如 ...