css背景样式属性介绍

  • 背景样式就是自定义HTML标签的背景颜色或背景图像。
  • 背景属性说明表
属性名 属性值 描述
background-color #f00、red、rgb(255,0,0) 设置背景颜色。
background-image url(背景图片路径) 设置背景图像。
background-repeat repeat、repeat-x、repeat-y、no-repeat 设置背景图片是否平铺和平铺方向。
background-position left、center、right、top、bottom、固定值、百分比 设置背景图片位置。
background-attachment scroll、fixed 设置背景图片位置是否是固定或滚动。
background 属性值就是以上的所有值 设置背景的缩写形式。

属性为background-color使用方式

  • 让我们进入属性为background-color实践，实践内容如：将HTML页面中的div背景设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-color属性使用</title>

    <style>

      div{

          background-color: red;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 为什么我们给div标签设置了background-color属性，还有属性值为red，div标签背景没有发生任何变化呢？
  • 原因有2点如： div标签里面没有任何内容、 div标签没有设置宽高度。
  • 接下来我们在实践，将div标签放置一些内容。
  • 代码块
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-color属性使用</title>

    <style>

      div{

          background-color: red;

      }

    </style>

</head>

<body>

   <div>成功不是打败别人，而是改变自己。</div>

</body>

</html>
  • 结果图

  • 现在属性为background-color和属性值为red才真正的被渲染出来。
  • 现在让我们将div内容消除掉，然后我们给div设置宽高度为200px像素，看看属性为background-color和属性值为red，能否被渲染出来呢？

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-color属性使用</title>

    <style>

      div{

           width: 200px;

           height: 200px;

          background-color: red;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 注意：现在大家应该明白了属性为background-color，只有设置了宽高度的元素或者元素里面有内容，才能被渲染出来。

属性为background-image使用方式

  • 属性为background-image用于给元素设置背景图片，将图片路径放在url()括号当中才会被渲染。

  • 属性为background-image和属性为background-color是一致的，都必须要有宽高度和内容才会被渲染。

  • 让我们进入属性为background-image实践，实践内容如：给div标签设置背景图片，div标签宽高度设置为400px像素。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-image属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           background-image: url(./img/001.png);

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 注意：属性为background-image默认图片是平铺的，所以这个结果图并不奇怪哈。

属性为background-repeat使用方式

  • 属性为background-repeat有2种作用如：
  • 1、元素的背景图片是否平铺。
  • 2、设置背景图片的水平方向平铺或垂直方向平铺。
  • 属性为background-repeat的属性值有4种如： repeat、repeat-x、repeat-y、no-repeat。
  • background-repeat属性值说明表：
属性值 描述
repeat background-repeat属性的默认值，作用表示背景图片平铺。
repeat-x 作用：将背景图片设置为水平方向平铺。
repeat-y 作用：将背景图片设置为垂直方向平铺。
no-repeat 作用：将背景图片设置为不平铺。

属性值为repeat实践

  • 让我们进入属性为background-repeat并且属性值为repeat实践，实践内容如：将div标签背景图片设置为平铺。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-repeat属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           background-image: url(./img/001.png);

           background-repeat: repeat;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 注意：假设我们不设置属性为background-repeat并且属性值为repeat，也没有关系的默认就是平铺。

属性值为repeat-x实践

  • 让我们进入属性为background-repeat并且属性值为repeat-x实践，实践内容如：将div标签背景图片设置为水平方向平铺，为了给初学者一个直观的印象，笔者将div标签添加了一个边框样式。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-repeat属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:repeat-x;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

属性值为repeat-y实践

  • 让我们进入属性为background-repeat并且属性值为repeat-y实践，实践内容如：将div标签背景图片设置为垂直方向平铺，为了给初学者一个直观的印象，笔者将div标签添加了一个边框样式。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-repeat属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:repeat-y;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

属性值为no-repeat实践

  • 让我们进入属性为background-repeat并且属性值no-repeat实践，实践内容如：将div标签背景图片设置为不平铺，为了给初学者一个直观的印象，笔者将div标签添加了一个边框样式。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-repeat属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

属性为background-position使用方式

  • 属性为background-position作用：设置背景图片的位置在哪。
  • 属性为background-position的属性值分为3种使用方式如：英文单词、固定值、百分比。
  • 英文单词的表示说明如：left（居左）、right（居右）、top（居上）、bottom（居下）、center（居中）
  • 让我们进入属性为background-position使用英文单词设置背景的位置实践。
  • 默认就是居上和居左我们就不实践了，如果是初学者可以尝试下。
  • 设置背景图片位置为居上和居右实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

           background-position: top right;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 设置背景图片位置为居下和居左实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

           background-position: bottom left;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 设置背景图片位置为居下和居右实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

           background-position: bottom right;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 设置背景图片位置为居中实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

            background-position: center center;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 以上就是英文单词设置背景图片的位置内容。
  • 现在我们进入固定值和百分比设置div标签背景图片的位置实践。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

           background-position: 100px;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

  • 由于简单百分比就不进行代码实践了，px单位换成%百分号就是按照元素的宽高度进行百分比计算背景图片的位置。
  • 其实英文单词和固定值或百分比可以混合使用呢，笔者将背景图片位置设置为居下并且是水平向右20px像素。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-position:center;

           background-position: 20px bottom;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

  • 结果图

属性为background-attachment使用方式

  • 属性为background-attachment作用：就是设置背景图片位置是否是固定或者是滚动的。
  • 属性为background-attachment属性值说明表：
属性值 描述
scroll 设置背景图片滚动。
fixed 设置背景图片固定。
  • 让我进入属性为background-attachment实践，实践内容将div标签背景图片位置滚动和固定位置，方便大家理解滚动和固定笔者将在div标签中放置一些内容。
  • 属性为background-attachment默认属性值就是scroll滚动的。
  • 背景图片位置滚动的实践

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-attachment:scroll;

      }

    </style>

</head>

<body>

   <div>

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。

    </div>

</body>

</html>

  • 结果图

  • 背景图片位置固定实践

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background-position属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background-image: url(./img/001.png);

           background-repeat:no-repeat;

           background-attachment:fixed;

      }

    </style>

</head>

<body>

   <div>

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。

    </div>

</body>

</html>

  • 结果图

属性为background使用方式

  • 属性为background就是设置背景的一个缩写。本章内容大家都掌握了这个就如小菜一点不值一提哈，废话就不多说了直接上代码块咯。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>background属性使用</title>

    <style>

      div{

           width: 400px;

           height: 400px;

           border: 1px solid red;

           background: url(./img/001.png) no-repeat top right scroll;

      }

    </style>

</head>

<body>

   <div>

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰，

     微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。

    </div>

</body>

</html>

  • 结果图

CSS中如何使用背景样式属性，看这篇文章就够用了的更多相关文章

  1. CSS中如果实现元素浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  2. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  3. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  4. CSS如何设置列表样式属性，看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  5. css中 font常用的样式属性

    今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型:    如: font-family:宋体; 2)字体大小 语法:font-size: ...

  6. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  7. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  8. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  9. C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志

    C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...

随机推荐

  1. 函数基础(一)(day10整理)

    目录 昨日内容 文件的基本应用 什么是文件 操作文件的流程 打开文件的三种模式 文件打开的两种方式 绝对路径和相对路径 绝对路径 相对路径 with管理文件上下文 文件的高级应用 新的打开文件的模式 ...

  2. 【构建工具】《Maven实战》读书笔记

    Maven是我们在做Java开发过程中用经常用到的一个辅助工具.本篇博客是我学习Maven的一个记录博客,学习过程主要参考<Maven实战>这本书.同时也参考了Maven的官方文档. 1. ...

  3. django-模板之if语句（九）

  4. anaconda重装jupyter notebook后启动jupyter报错的问题

    问题描述: 由于jupyter出现难以解决的问题,采用重新安装来解决问题,但是重装之后启动jupyter报错ImportError: libsodium.so.23: cannot open shar ...

  5. Swift UIViewController中的delegate方式传值

    ios swift开发中有几种方式传值,看到简书上一篇不错的文章. 链接:http://www.jianshu.com/p/3e1173652996 一.通过segue进行传值 二.通过delegat ...

  6. 处理echarts用到的数据格式。。。

    1.需求将数据组装: 将typeNumMap中 键为 '1' 的放在数组series 索引为1的data数组中, 将'2'放在索引为2的data数组中,如果 typeNumMap 中没有 对应的 1, ...

  7. 洛谷P2858 【[USACO06FEB]奶牛零食Treats for the Cows】

    我们可以记录头和尾再加一个卖了的零食数目,如果头超过尾就return 0. 如果遇到需要重复使用的数,(也就是不为零的d数组)就直接return d[tuo][wei]. 如果没有,就取卖头一个与最后 ...

  8. SpringBoot正确打日志的姿势

    前篇 Spring Boot 日志处理你还在用Logback? 本文简介 前篇侧重 Log4j2 的配置,本篇侧重统一日志处理的应用,以下包含 HTTP 请求的日志处理.Exception 异常日志处 ...

  9. [考试反思]1005csp-s模拟测试60：招魂

    最近总是好一场烂一场的.没有连续两场排名波动小于20的... 没人管.反正大脸一点脸没有就又AK了. 但是T3爆零这种事情吧... 爆搜不是很难打,但是想优化想了半天剩的时间不够结果赶忙打出来了,然后 ...

  10. CSPS模拟 88

    今天我还是个弟弟. 果然唯有AK不可超越.. T1 决策单调性,暴力上整体二分. 极限数据跑的挺快,可是被n<k的脑残测试点qj了.. T2 又是大模拟! T3 想到剩余同种数量的彩球完全等效 ...