【CSS学习】--- 背景
一、前言
元素的背景区域包括:元素的内容、内边距和边框区域。
CSS中用于设置背景的属性有:
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-repeat | 设置是否以及如何重复背景图像 |
background-position | 设置背景图的开始位置 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
background | 简写属性,作用是将所有属性值写在一个声明中 |
背景属性默认都不继承。下面我们来逐步学习设置背景的各个属性。
二、背景颜色:background-color
background-color 属性为元素设置一种纯色背景。
属性值:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
line-height: 100px;
border: dashed 10px black;
background-color: #FFCCCC;
}
</style>
</head>
<body>
<div>虚线之间也填充了背景色!</div>
</body>
</html>
background-color
三、背景图片:background-image
background-image 属性为元素设置背景图像。默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
建议同时设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
属性值:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.one{
width: 200px;
height: 100px;
margin-bottom: 10px;
line-height: 100px;
background-image: url(http://h5ip.cn/ybPo);
}
.two{
width: 200px;
height: 100px;
line-height: 100px;
background-image: url(随便了);
background-color: #FFCCCC;
}
</style>
</head>
<body>
<div class="one">背景是赵丽颖哦。</div>
<div class="two">图没了,但还有背景色!</div>
</body>
</html>
background-image
四、背景重复:background-repeat
background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。
属性值:
栗子:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
div{
width: 200px;
height: 50px;
background-image: url(images/background.jpg);
margin-bottom: 20px;
border: solid 1px black;
}
.no-repeat{background-repeat: no-repeat;}
.repeat{background-repeat: repeat;}
.repeat-x{background-repeat: repeat-x;}
.repeat-y{background-repeat: repeat-y;}
</style>
</head>
<body>
<div class="no-repeat">
不重复no-repeat
</div>
<div class="repeat" ">
重复repeat
</div>
<div class="repeat-x">
x上重复repeat-x
</div>
<div class="repeat-y">
y上重复repeat-y
</div>
</body>
<html>
test background-repeat
五、背景定位:background-position
background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
提示:1.您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
2.如果只设置background-position而不设置background-repeat,则背景图片还是会填充整个元素。
属性值:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
.one{
width: 200px;
height: 100px;
margin-bottom: 10px;
line-height: 100px;
border: dashed 5px black;
background-image: url(images/background.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}
.two{
width: 200px;
height: 100px;
line-height: 100px;
border: dashed 5px black;
background-image: url(images/background.jpg);
background-position: bottom right;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="one">设置no-repeat</div>
<div class="two">设置repeat-y</div>
</body>
</html>
background-position
我们发现当位置为bottom right时(第一个图所示),背景图并没有填充边框区域,而设置repeat-y之后(第二个图所示),背景图只填充了上下边框区域。这是因为background-position的属性值都是相对边框而言的(不包含边框),但设置repeat属性后可以填充边框。
六、背景附加方式:background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性值:
其中fixed只是相对于该元素固定,当整个元素上滑后,背景自然也就滑出了界面。您可以尝试设置了指定高度的元素,例如下面第一个代码test:
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
height: 700px;
border: solid 1px black;
background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
p{
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
</div>
</body>
</html>
test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
p{
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
</div>
</body>
</html>
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
background-repeat: repeat-x;
}
p{
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
<p>试着往下滚动鼠标</p>
</div>
</body>
</html>
默认scroll,滚动
建议复制上面两个代码,提交到W3School测试,点我传送!
七、快捷方式:background
background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,设置顺序也没有要求。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
div{
width: 225px;
border: solid 1px black;
background: gray url(images/background.jpg) top repeat-x fixed;
}
p{
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
background
八、最后
所学不深,如有不足请您留言指出,十分感谢!
最新文章
- Hibernate注解----关联映射注解以及课程总结详解----图片版本
- Qt qtextstream读取文件
- 国内常用DNS地址介绍
- java序列化深拷贝
- 详细安装ss的过程(vultr)
- (原创) C# List 找 Max 的 Index
- HTML5 canvas易错点
- java中处理字符编码(网页与数据库)(转)
- NodeJS 学习笔记一
- [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中
- SVN clean失败解决方法
- java基础之自定义异常类及throw和throws的区别
- ZOJ 4057 XOR Clique(位运算)
- Compile pam with pam_cracklib.so
- jQuery:SP.NET Autocomplete Textbox Using jQuery, JSON and AJAX
- 利用VS2017跨平台远程调试aspnetcore应用
- java操作数据库的事务支持
- SSIS 连接数据
- JavaScript快速入门-ECMAScript运算符
- Spring Boot 集成Shiro和CAS
热门文章
- ReactNative学习笔记(五)踩坑总结
- 带你入门Python爬虫,8个常用爬虫技巧盘点
- iptables概述
- 排名前 16 的 Java 工具类
- HW2018校招研发笔试编程题
- 安装CDH5 hadoop2.3.0 NodeManager 没有启动
- 如何在IDEA里给大数据项目导入该项目的相关源码(博主推荐)(类似eclipse里同一个workspace下单个子项目存在)(图文详解)
- 从零开始学 Web 之 移动Web(八)Less
- 【精】EOS智能合约:system系统合约源码分析
- [深度学习] 最全优化方法总结比较--SGD,Adagrad,Adadelta,Adam,Adamax,Nadam