背景样式

设置背景颜色

  • 格式：background-color:颜色值、
  • 颜色值可以用颜色名称、十六进制码、RGB码，background-color不仅用于设置网页颜色背景，表格和单元格背景都可以设置
<style>
    p{background-color: red;}
</style>

设置背景图片

属性 属性名称 设置值
background-image 背景图片 url("图片路径")
background-repeat 是否重复显示背景图片 repeat(默认，重复并排显示)
repeat-x (水平方向重复显示)
repeat-y (垂直方向重复显示)
no-repeat(不重复显示)
background-attachment 背景图片是否随网页滚动条滚动 fixed(固定)
scroll(随滚动条滚动)
background-position 背景图片位置 x%
y%
x y
[[top,center,bottom]][][left,center,right]]
background 综合应用
background-size 设置背景尺寸 length(长度)
percentage(百分比)
cover(缩放到最小边符合组件)
contain(缩放到元素完全符合组件)
background-origin 设置背景原点 padding-box
border-box
content-box

1.background-image设置背景图片

  • 格式：background-image:url(图片路径)
  • 图片格式可以是JPG，GIF，PNG
  • 可是设置多个背景图片，中间用逗号分开
<style>
    body{background-image: url("images.jpg"),url("images1.jpg");}
</style>

2.background-repeat设置背景图片是否重复显示

  • 格式：background-repeat:属性值
  • 四种属性：repeat(重复并排显示，默认值)、repeat-x(水平方向重复显示)、repeat-y(垂直方向重复显示)、no-repeat(不重复显示)
<style>
    #box1{background-repeat: no-repeat;}
</style>

3.background-attachment设置背景图片是否与滚动条一起滚动

  • 格式：background-attachment:属性值
  • fixed：当网页滚动时，背景图片固定不动；scroll：当网页滚动时，背景图片会随滚动条滚动，这是默认值
<style>
    #box1{background-attachment: fixed;}
</style>

4.background-position设置背景图片位置

  • 格式：background-position:属性值
  • 属性值必须有两个，分别是x值与y值，x与y值可以是坐标数值，或者直接输出位置
  • 单位可以是px，pt或百分比，水平位置可以直接写left(左)，center(中)，right(右)；垂直位置可以直接写top(上)，center(中)，bottom(下)
  • 如果省略y值，则垂直方向会默认为50%
<style>
    #box1{background-position: center center;}
    #box2{background-position: 40px 50%;}
    #box3{background-position: 40px;}
</style>

5.background-size设置背景尺寸

  • 格式：background-size:属性值
  • 属性值可以是长和宽、百分比、cover或contain
  • cover会让背景图片符合组件大小并充满组件，contain让背景图片符合组件大小但不会超出组件，而两种都不会改变图形的长宽比
<style>
    #box1{background-position: 60px 80px;}
    #box2{background-position: cover;}
</style>

6.background-origin设置背景原点

  • background-origin:属性值
  • background-origin属性是设置背景图片的原点位置，属性有padding-box，border-box，content-box，分别为背景图片的填充位置是以内边距为原点开始，以边框为原点开始，以文本内容为原点开始
例：以内边距为原点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <link rel="stylesheet" href="Day1.css">
</head>
<body>
   <div>
        这是一段文本
   </div>
</body>
</html>
 css代码
div{
    width: 400px;
    height: 400px;
    margin: 40px auto;
    border: 10px red solid;
    text-align: center;
    padding: 30px;
    background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.scXWGmGoESuiOzWJBHue9QHaHa?pid=ImgDet&rs=1");
    background-size: 10%;/*设置图片尺寸*/
    background-repeat: no-repeat;/*置图片不重复*/
    backround-origin: padding-box;/*以内边距为原点*/
}
例：以边框为原点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <link rel="stylesheet" href="Day1.css">
</head>
<body>
   <div>
        这是一段文本
   </div>
</body>
</html>
 css代码
div{
    width: 400px;
    height: 400px;
    margin: 40px auto;
    border: 10px red solid;
    padding: 30px;
    background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.scXWGmGoESuiOzWJBHue9QHaHa?pid=ImgDet&rs=1");
    background-size: 10%;/*设置图片尺寸*/
    background-repeat: no-repeat;/*置图片不重复*/
   background-origin: border-box/*以边框为原点*/
}
例：以文本为原点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <link rel="stylesheet" href="Day1.css">
</head>
<body>
   <div>
        这是一段文本
   </div>
</body>
</html>

css代码
div{
    width: 400px;
    height: 400px;
    margin: 40px auto;
    border: 10px red solid;
    padding: 30px;
    background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.scXWGmGoESuiOzWJBHue9QHaHa?pid=ImgDet&rs=1");
    background-size: 10%;/*设置图片尺寸*/
    background-repeat: no-repeat;/*置图片不重复*/
    background-origin: content-box;/*以文本为原点*/
}

设置背景透明度

  • 格式：opacity:属性值
值 描述
value 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit Opacity属性的值应该从父元素继承 
<style>
	div{opacity:0.5;}	
</style>

  • 格式：background: rgba(255,255,255,0.5);

  • a指定不透明度。从0.0（完全透明）到1.0（完全不透明）

<style>
    div{background:rgba(255,255,255,0.5);}
</style>