前言
本文章:讲述如何用css给背景添加样式、背景尺寸、背景移动、以及背景图片的渲染位置,并且介绍了列表样式。
一、背景样式
背景颜色的设置 background-color:加入颜色;
这里的颜色可以是颜色的英文单词也可以是十六进制、或者rgb 颜色;
block:块级
inline:行内元素
inline-block:行内块元素
行级元素:行内元素和行内块元素
浏览解析行级元素会当成文本处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color:red;
display: inline-block;
}
span{
width: 200px;
height: 200px;
background-color:green;
/* block:块级
inline:行内元素
inline-block:行内块元素
行级元素:行内元素和行内块元素
浏览解析行级元素会当成文本处理
*/
display:inline-block;
/* margin-left:-10px; */
margin-left: -8px;
}
p img{
margin-left:-8px;
}
</style>
</head>
<body>
<div></div>
<span></span>
<p>
<img src="./img/photo-1.jpg" alt="">
<img src="./img/photo-1.jpg" alt="">
<img src="./img/photo-1.jpg" alt="">
</p>
</body>
</html>
二、背景尺寸
这里的url是链接的一个照片的路径
背景尺寸
cover:直接缩放到和父元素一样的宽高
auto:默认,原样
contain:保持图片宽高比例最大化缩放
x,y: 100px 50%(相对父元素的宽高比例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: red;
margin: 0 auto;
width: 250px;
height: 200px;
/*
综合设置
顺序时:1.颜色 2.图片 3.图片的存在方式
*/
background: red url("./img/photo-1.jpg") no-repeat ;
/* 背景尺寸
cover:直接缩放到和父元素一样的宽高
auto:默认,原样
contain:保持图片宽高比例最大化缩放
x,y: 100px 50%(相对父元素的宽高比例)
*/
/* background-size: 200px 200px; */
background-size: 60% 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、背景移动
背景图片是否固定
local:默认,会随浏览器滚动条滚动
fixed:背景固定不动,不跟随滚动条移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 引用背景图片,父元素必须设置高度 */
.wrapper{
height: 915px;
background: pink url("./img/bg.jpg") no-repeat;
/* 背景图片是否固定
local:默认,会随浏览器滚动条滚动
fixed:背景固定不动,不跟随滚动条移动
*/
background-attachment: fixed;
border: 10px solid red;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
</div>
<div>
</div>
</body>
</html>
四、背景图片的渲染位置
背景图片渲染的位置
border-box:可以在边框区域、内边距区域、内容区域
padding-box:默认,可以在内边距区域和内容区域
content-box:只能在内容区域
当只写一个位置的时候
left:靠左垂直居中
right:靠右垂直居中
top:靠顶端水平居中
bottom:靠底端水平居中
center:水平方向和垂直方向上居中
当写两个位置的时候
例如:left bottom 便是左下角位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 20px solid rgb(255, 0, 0, 0.5);
padding: 100px;
background: lightgreen url("./img/chui.png") no-repeat;
/* 背景图片渲染的位置
border-box:可以在边框区域、内边距区域、内容区域
padding-box:默认,可以在内边距区域和内容区域
content-box:只能在内容区域
*/
background-origin: border-box;
/* 当只写一个位置的时候
left:靠左垂直居中
right:靠右垂直居中
top:靠顶端水平居中
bottom:靠底端水平居中
center:水平方向和垂直方向上居中
当写两个位置的时候
例如:left bottom 便是左下角位置
*/
background-position: left bottom;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
五、列表样式
列表符号类型
none:去掉列表符号
circle:空心圆
square:方形圆点
decimal:数字
列表符号位置
outside:符号在列表外,默认
inside:符号在列表内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li {
border: 1px solid red;
/* 列表符号类型
none:去掉列表符号
circle:空心圆
square:方形圆点
decimal:数字
*/
list-style-type: decimal;
/* 列表符号位置
outside:符号在列表外,默认
inside:符号在列表内
*/
list-style-position: inside;
/* 列表符号图片引用 */
list-style-image: url("./img/arrow-right.gif");
list-style: url("./img/arrow-right.gif")inside;
/* list-style: square outside; */
/* list-style: none; */
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
总结
以上内容简单介绍了背景样式的几个方面,更多内容请关注博主。