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. 2019 计蒜之道 复赛 E. 撑起信息安全“保护伞” （贪心，构造，规律）

    为了给全球小学员打起信息安全"保护伞",VIPKID 还建立了一套立体化的安全防御体系,7 \times 247×24 小时持续安全监控与应急响应等多项联动,具备业界最高级别的数据 ...

  2. AtCoder Regular Contest 092 2D Plane 2N Points AtCoder - 3942 （匈牙利算法）

    Problem Statement On a two-dimensional plane, there are N red points and N blue points. The coordina ...

  3. 第一次接触oracle

    登录 SQLPLUS cmd sqlplus [用户名]/[密码][@数据库] [参数] sqlplus sys/orcl as sysdba -- 登录 sys 用户,必须指定 sysdba 或 s ...

  4. IO流一

    1 Java IO原理 I/O是input/output的缩写,IO技术是非常实用的技术,用于处理设备之间的数据传输.如读写文件,网络通讯等. Java程序中,对于数据的输入输出操作以“流Stream ...

  5. html2canvas 把h5网页保存为图片 区域保存

    html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...

  6. Pytorch详解NLLLoss和CrossEntropyLoss

    是什么? https://www.cnblogs.com/marsggbo/p/10401215.html 具体pytorch怎么运算的 https://blog.csdn.net/qq_222102 ...

  7. 【leetcode】698. Partition to K Equal Sum Subsets

    题目如下: 解题思路:本题是[leetcode]473. Matchsticks to Square的姊妹篇,唯一的区别是[leetcode]473. Matchsticks to Square指定了 ...

  8. CSS3画五角星和六角星

    最终想要实现的效果 一.五角星 在画五角星之前首先分析这个五角星是如何实现,由哪几个部分构成的,示意图如下: 三个顶角向上的三角形,通过设置旋转和定位相互重叠和拼接实现最终的五角星效果. 为了语义化和 ...

  9. 怎么实现超大文件上传 2-3GB

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  10. B/S超大文件上传与下载

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...