CSS基本样式-背景属性

2019-12-21 22:57:23 阅读：178 来源： 互联网

标签：repeat 样式 color 背景图片 background url 属性 CSS 255

代码是敲出来的，建议一个一个过一遍

背景属性

背景颜色

  background-color  背景颜色
  默认值是transparent(透明的)

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基本样式</title>
    <style>
        body{
            height: 1000px;
            /*背景颜色   默认为透明  transparent*/
            /*颜色的取值：
            1.关键字：red、blue等
            2.16进制：#000000、#cccccc、#ff0000等
            3.rgb(0,0,0)
            4.rgba(0,0,0,.5)
            */
            background-color: red;
            background-color: #ff0000;
            background-color: rgb(255,0,0);
            background-color: rgba(255,0,0,.5);

        }
    </style>
</head>
<body>
<h1>背景属性</h1>
</body>
</html>

背景图片

  background-image  背景图片
      默认值是none(没有图片)
  元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
  通过url使用绝对或相对地址指定图片
  background-image: url("images/img.jpg");
  1.绝对路径：文件在网络或本地的绝对地址，从盘符开始  C:\Users\Administrator\Desktop\a.jpg
  2.相对路径：相对于你当前目录，同一等级直接写图片名称即可，在下一级，用\查找，在上一级，用../查找。一般不使用绝对地址。

示例代码

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        body{
            height: 1000px;
            /*背景颜色   默认为透明  transparent*/
            background-color: red;
            /*background-color: #ff0000;*/
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,.5);*/
            
            /*背景图片 默认水平垂直平铺*/
            /*background-image: url("images/pic2.jpeg");*/

            /*背景图片平铺*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/

            /*背景图片的大小*/
            /*background-size:1000px ;*/
            /*background-size: 100% 100%;*/

            /*背景图片固定*/
            /*background-attachment:fixed ;*/

            background:red  url("images/pic2.jpeg") no-repeat fixed ;
            background-size: 100% 100%;
        }
        .box{
            width: 800px;
            height: 600px;
            /*background-color: rgba(255,255,255,.5);
            background-image: url("images/pic1.jpg");
            background-repeat: no-repeat;*/
            /*background-size: contain;*/

            background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;


            /*背景图片定位*/
            /*background-position: x y;*/
            /*当只有水平方向，垂直方向默认居中*/
            /*background-position: 30px 30px;*/
            /*background-position: 30px;*/
            /*background-position: right bottom;*/
            /*background-position: center;*/


            /*简写为*/
            /*background：颜色 图片 平铺 大小  定位 固定;*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

标签：repeat,样式,color,背景图片,background,url,属性,CSS,255
来源： https://www.cnblogs.com/Testking/p/12078547.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS基本样式-背景属性

背景属性

背景图片