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 " ...
随机推荐
- Win7 登入提示临时漫游档案
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList
- magento-connect-manage出现404或者500内部错误的解决办法
将网站根目录下的downloader文件权限改为755,将downloader下的index.php文件的权限改为644即可:
- Json对象与Json字符串互转
1>jQuery插件支持的转换方式: 复制代码 代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成js ...
- 一个js对象的代码结构
初步理解的js里一个对象的写法: GameLayer GameLayer.js var GameLayer = cc.Layer.extend({ //私有属性(带下划线"_&q ...
- Core Java Volume I — 3.5. Operators
3.5. OperatorsThe usual arithmetic operators +, -, *, / are used in Java for addition, subtraction, ...
- spring和redis的整合-超越昨天的自己系列（7）
超越昨天的自己系列(7) 扯淡: 最近一直在慢慢多学习各个组件,自己搭建出一些想法.是一个涉猎的过程,慢慢意识到知识是可以融汇贯通,举一反三的,不过前提好像是研究的比较深,有了自己的见解.自认为学习 ...
- B3log部署文档
https://github.com/b3log/solo/wiki/standalone_mode 独立模式 只要已经安装好了 Java 环境,一个命令就能启动! 不依赖 MySQL 数据库,而是使 ...
- leetcode 146. LRU Cache ----- java
esign and implement a data structure for Least Recently Used (LRU) cache. It should support the foll ...
- leetcode 140. Word Break II ----- java
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- 所学新知——int、char型转string 类型等
1. 利用stringstream类 定义头文件#include<sstream> 通过 int a; char b; sstream ss,ss1; ss<<a; ss1&l ...