码迷,mamicode.com
首页 > Web开发 > 详细

CSS基本样式-背景属性

时间:2019-12-22 00:22:25      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:str   no-repeat   des   目录   center   背景图   class   div   直接   

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

背景属性

  1. 背景颜色
  •   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>

CSS基本样式-背景属性

标签:str   no-repeat   des   目录   center   背景图   class   div   直接   

原文地址:https://www.cnblogs.com/Testking/p/12078547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!