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. linux capalibities

    linux进程能力管理 安装能力查看工具集 yum install libcap-ng-utils 主要包含以下工具 [root@thatsit ~]# rpm -ql libcap-ng-utils ...

  2. P4513 最大连续字段和 (线段树+区间合并)

    题目链接:https://www.luogu.org/problem/P4513 题目大意:单点修改和求区间最大连续字段和 解题思路:很容易想到是用线段树来做,但是如何进行维护呢? 每个维护区间 [L ...

  3. 计蒜客 蓝桥模拟 G. 数列求值

    递归式移项得Ai+1 = 2Ai + 2Ci - Ai-1; 1.A2 = 2A1 + 2C1 - A0; 2.A3 = 2A2 + 2C2 - A1; . . . n.An+1 = 2An + 2C ...

  4. Linux openssh8.0p1升级步骤(shell版本)

    运维自动化时代,手动升级太徒劳了,为了提高效率及准确率,自动化安装是必备的. 下面是通过shell写的脚本.也可以将其应用到ansible上. 准备好安装文件: openssh-8.0p1.tar.g ...

  5. CSP-J&S 游记以及总结

    前言 以前的比赛没有写什么总结,都只注重结果,没有注重过程,不知道如何才能在比赛中拿到高分,因此这次CSP才会考得一塌糊涂. 从此吸取教训,每场比赛都要总结经验,每场比赛都要尽全力考,每个题目都要尽全 ...

  6. IP地址转二进制

    例如216这个数 216 = 1 * 128 +1 * 64 + 0 * 32 + 1 * 16 + 1 * 8 + 0 * 4 + 0 * 2 + 0 * 1 提取乘号之前的数字我们得到所代表的二进 ...

  7. pycharm设置SDK

    1.一看到这个提示,就知道Pycharm中尚未配置Python解释器,此时不用慌,并不是Pycharm没有安装成功,而是因为有个配置尚未完成,只需要配置好Python解释器之后,一切都会正常.其实Py ...

  8. 使用pycharm创建git项目的过程

    首先建立远程仓库,然后将远程仓库克隆到本地 然后在pycharm中以该目录创建项目(如果遇到说目录非空,不用管它,Location直接粘贴古来,不然找不到路径) 如果构建好项目说无效的SDK,那么选择 ...

  9. 关于CSS你应该知道的基础知识 - 盒模型篇

    浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...

  10. lamba

    >>> from random import randint>>> allNums = []>>> for eachNum in range(10 ...