[Web 前端] 011 css 背景属性
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 背景属性的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- CSS背景属性
CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
随机推荐
- 瞎JB逆
P为质 ; long long quickpow(long long a, long long b) { ) ; ; a %= mod; while(b) { ) ret = (ret * a) % ...
- Docker 内pip安装package报错: Failed to establish a new connection: [Errno -3] Temporary failure in name resolution'
说来奇幻(对本菜来说, 经常遇到堪称奇幻的问题) 之前在docker里面各种安装都没问题, 也不知道什么引起的, 昨天晚上调试的时候卸载了一个包的版本,然后就安不上了. 宿主机安装依然各种流畅,唯独d ...
- <转>ThinkPHP的开发常用系统配置项
/* 项目设定 */ ’APP_DEBUG’ => false, // 是否开启调试模式 ’APP_DOMAIN_DEPLOY’ => false, // 是否使用独立域名部署项目 ’AP ...
- 浅谈C++ allocator内存管理(对比new的局限性)(转)
STL中,对内存管理的alloc的设计,迫使我去学习了allocator类.这里对allocator内存管理做了点笔记留给自己后续查阅.allocator类声明.定义于头文件<memory> ...
- @transactional注解在什么情况下会失效,为什么?
一,特性: 1,一般在service里加@Transactional注解,不建议在接口上添加,加了此注解后此类会纳入spring事务管理中,每个业务方法执行时,都会开启一个事务,不过都是按照相同的管理 ...
- 关于在IOS中 contenteditable=true 无法输入的问题
解决: 1.添加样式-webkit-user-select:text 2.如果引入了fastclick,需要添加个类名 needsclick 来源于知乎(https://www.zhihu.com/q ...
- 为什么要使用puppet 及初步接触
为什么要使用puppet 及初步接触 1.简介 云计算环境下,密度高,机器数量多,还要求弹性和伸缩性,这对于运维提出更高的要求.系统管理员需要经常安装操作系统,对系统参数进行配置和优化,对人员进行 ...
- 在浏览器下载pdf,或者txt文档是会直接打开
window.location.href = url会直接打开,解释大概是因为浏览器自身可以解析.pdf或者txt.解决方法如下: 本来就要用a标签里面加上download属性的,结果发现不行,就算了 ...
- 【leetcode】1170. Compare Strings by Frequency of the Smallest Character
题目如下: Let's define a function f(s) over a non-empty string s, which calculates the frequency of the ...
- 父页面和iframe之间的通信(操作和传值问题)
一.jq实现iframe父页面与子页面传值与方法调用 1.值操作 (1)父页面获取子页面的值 $('iframe的id').contents().find(子页面的id).text(); (2)子页面 ...