CSS之background属性
css背景是个很有意思的东西，可设置
背景色:background-color
背景图:backgoround-image
背景图显示相对位置：background-position,正数图片往右下移，负数图片向左上移
背景图片示例：（每张图片高度50px,空白处50px）
示例：
1、背景色：
css文件代码
.c1{
width: 100%;
height: 50px;
background-color: #425a66;
}
html代码，跟下面的所有情况一样，后面就不再写了
<body>
<div class="c1"></div>
</body>
效果图
2、背景图（不重复）
css代码
.c1{
width: 100%;
height: 500px;
background-color: #425a66;
background-image: url(quantu.png);
background-repeat: no-repeat;
效果图
3、背景图（重复）
css代码
.c1{
width: 100%;
height: 500px;
background-color: #425a66;
background-image: url(quantu.png);
}
效果图
4、显示背景图相对位置
css代码(0:图片在x轴不动，-300图片在y轴向上移动300px,正好显示第4张图片)
由于我们的
height: 50px; 与图片的高度相同
所以正好显示了一张小图片。
.c1{
width: 100%;
height: 50px;
background-color: #425a66;
background-image: url(quantu.png);
background-repeat: no-repeat;
background-position: 0 -300px;
}
效果图
CSS之background属性的更多相关文章
- css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- 深入学习css之background属性
css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...
- CSS background 属性全家桶
介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS background 属性
CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...
- CSS background 属性 总结
CSS background 属性总结
- CSS 背景图像 background属性简写
background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
随机推荐
- 转：Spring中@Autowired注解、@Resource注解的区别
Pay attention: When using these annotations, the object itself has to be created by Spring context. ...
- 【LeetCode OJ】Best Time to Buy and Sell Stock III
Problem Link: http://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ Linear Time Solut ...
- HDU 5784 (计算几何）
Problem How Many Triangles (HDU 5784) 题目大意 给定平面上的n个点(n<2000),询问可以组成多少个锐角三角形. 解题分析 直接统计锐角三角形较困难,考虑 ...
- Linked List Cycle II
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...
- Core Java Volume I — 4.1. Introduction to Object-Oriented Programming
4.1. Introduction to Object-Oriented ProgrammingObject-oriented programming, or OOP for short, is th ...
- 使用Jmeter测试MySQL性能——(1)连接配置
在搭建MySQL集群之后需要测试集群的性能究竟如何,采用Apache的测试工具Jmeter进行测试,本文主要介绍主要实现Jmeter配置连接到MySQL. 安装相应的软件 首先Jmeter是基于Jav ...
- C. Polycarpus' Dice
在每个位置讨论一下最大值最小值的取值范围就行 #include<cstdio> #include<iostream> #define maxn 200003 using nam ...
- Win下循环进入目录启动执行某任务
cd tldlq for /D %%s in (*) do ( cd %%s start "" LoginGate.exe start "" GameGate. ...
- Linux bashrc和profile的用途和区别
导读 使用终端ssh登录Linux操作系统的控制台后,会出现一个提示符号(例如:#或~),在这个提示符号之后可以输入命令,Linux根据输入的命令会做回应,这一连串的动作是由一个所谓的Shell来做处 ...
- jsonp跨域请求数据实例——手机号码查询
前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 上篇博客 ...