1. 概览

参数 释义
background-color 背景颜色
background-image 背景图片
background-repeat 是否重复
background-position 定位
background-size（css3 的属性） 背景大小
举例：background-size:100px 140px;

2. 举例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div>

            <p class="box1">

                001 <br>

            </p>

            <p class="box2">

                002 <br>

            </p>

        </div>

    </body>

</html>


*{

    width: 400px;

    height: 240px;

}

.box1{

    background-color: #b35e59;

    background-image: url(../img/pic2.jpg); /* 注：此图 200X120 */

    background-repeat: no-repeat;           /* 不重复 */

    background-position: center;            /* 图片定位：居中 */

    /* 在网页当中让图片或者元素往上移动或者往左移动，需使用负值 */

}

.box2{

    background-color: #f1c4be;

    background-image: url(../img/pic2.jpg);

    background-repeat: no-repeat;

    background-position: center;

    background-size: 25% 25%;               /* width*25% height*25% */

    /*background-size: 100px 60px; 因为数字是凑好的，所以效果与上方一致*/

}
  • 效果截图

[Web 前端] 011 css 背景属性的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

  7. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  8. Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. Python核心技术与实战——十|面向对象的案例分析

    今天通过面向对象来对照一个案例分析一下,主要模拟敏捷开发过程中的迭代开发流程,巩固面向对象的程序设计思想. 我们从一个最简单的搜索做起,一步步的对其进行优化,首先我们要知道一个搜索引擎的构造:搜索器. ...

  2. python3-安装第三方模块

    在Python中,安装第三方模块,是通过包管理工具pip完成的. 如果你正在使用Mac或Linux,安装pip本身这个步骤就可以跳过了. 如果你正在使用Windows,请参考安装Python一节的内容 ...

  3. 十、S3C2440 开发资源

    10.1 S3C2440 内部资源 1.2V 内核供电, 1.8V/2.5V/3.3V 储存器供电, 3.3V 外部 I/O 供电,具备 16KB 的指令缓存和 16KB 的数据缓存和 MMU 的微处 ...

  4. PHP简单的爬虫–原型

    1.PHP简单的爬虫–原型 爬虫的原理: 给定原始的url: 分析链接,根据设置的正则表达式获取链接中的内容: 有的会更新原始的url再进行分析链接,获取特定内容,周而复始. 将获取的内容保存在数据库 ...

  5. php-fpm参数优化

    php-fpm参数优化 2013-11-18 Posted by yeho php-fpm进程设置多少合适,设成动态还是静态? <lnmp一键安装包>中会根据你服务器内存调整php-fpm ...

  6. LA 4327 Parade(单调队列优化dp)

    题目链接: 题目大意(摘自刘汝佳<<算法竞赛入门经典--训练指南>>):F城是由n+1条横向路和m+1条竖向路组成.你的任务是从最南边的路走到最北边的路,使得走过的路上的高兴值 ...

  7. 快速掌握Eclipse Plugin / RCP开发思想

    本文转载:https://my.oschina.net/drjones/blog/280337 引言 本文不是快速入门的文章,只面向有一定基础的开发人员,至少看这篇文章之前你应该了解什么是Eclips ...

  8. 解决json不能解析换行问题

    今天遇到一个问题,当我读取数据库中某条带换行的数据时,解析错误. 解决方法是在存入数据库时对数据做处理,把换行换成其他字符.代码如下: remark = remark.replace(/\n/g,&q ...

  9. 为什么阿里巴巴要禁用Executors创建线程池？

    作者:何甜甜在吗 juejin.im/post/5dc41c165188257bad4d9e69 看阿里巴巴开发手册并发编程这块有一条:线程池不允许使用Executors去创建,而是通过ThreadP ...

  10. 【PowerOJ1756&网络流24题】最长k可重区间集问题（费用流）

    题意: 思路: [问题分析] 最大权不相交路径问题,可以用最大费用最大流解决. [建模方法] 方法1 按左端点排序所有区间,把每个区间拆分看做两个顶点<i.a><i.b>,建立 ...