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

背景属性

  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基本样式-背景属性的更多相关文章

  1. CSS 常用样式 – 背景属性

    一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 & ...

  2. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  3. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  4. css学习_css背景属性及其应用

    css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果

  5. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  6. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css里的背景属性有哪些，如何去使用哪些属性

    分类:纯色背景    背景图像 1.背景颜色 background-color : 任意合法的颜色 和 transparent 2.背景图像 background-image : url(想要加载的图 ...

  8. [1.1W字] 复习: CSS 9个背景属性&6种渐变函数, 学会可以手写实现AI中强大的"任意渐变"! #Archives009

    Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点 ...

  9. CSS学习笔记-背景属性

    一.背景尺寸属性:    1.含义:        背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式:        1.1具体像素:             backgro ...

随机推荐

  1. Python 正则表达式Ⅱ

    re.search方法 re.search 扫描整个字符串并返https://www.xuanhe.net/回第一个成功的匹配. 函数语法: 函数参数说明: 匹配成功re.search方法返回一个匹配 ...

  2. plsql 连不上64位oracle客户端

    1)安装Oracle 11g 64位 2)安装32位的Oracle客户端( instantclient-basic-win32-11.2.0.1.0) 下载instantclient-basic-wi ...

  3. Linux设置程序开机自启动，系统命令chkconfig及linux /etc/rc.d/目录的详解

     整理了linux下程序开启几种方式,转载相关博客做统一记录 <linux程序设置开机自启动>转载自:https://www.cnblogs.com/flcz/p/7691532.html ...

  4. CSS 按钮

    总结有关按钮的各种样式 ㈠基本按钮样式 看一下没有进行css样式设计时按钮的样子与进行样式设计的按钮样子 <!DOCTYPE html> <html> <head> ...

  5. SpringBoot项目中，WebSocket的使用（观察者设计模式）

    1.什么是WebSocket(选择至菜鸟教程(点击跳转),观察者模式) WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和 ...

  6. 【杂题】[CodeForces 1172D] Nauuo and Portals【构造】

    Description 有一个n*n的网格,你需要在上面设置一些传送门,传送门由两个配对的格子组成,从一个进入会立刻从另一个同一方向出来. 现在有n个人从第1列出发向右走,位于(i,1)的人要走到(r ...

  7. sqlmap自动注入 --DETECTION

    --level /usr/shar/sqlmap/xml/payloads 多个脚本 sqlmap里面的payload都在这里面 --risk 1-4(默认 1/ 无害) Risk升高可造成数据被串改 ...

  8. PHPSESSID的cookie//session_start()

    如果PHP脚本中有: 1 session_start(); 则说明使用了SESSION. SESSION是一种机制,可以在服务器端跨文件暂时保存数据或传递数据,常用于购物车等方面. SESSION只在 ...

  9. Struts1与Struts2区别？

    (1)Struts1执行过程: <1>Web容器启动的时候ActionServlet被初始化,加载struts-config.xml配置文件. <2>浏览器发送请求到Actio ...

  10. Linux常用命令及操作

    shutdown -r now现在重启 shutdown -h now现在关机 reboot重启 startx进入图形界面 chmod +x 777 文件名 授权和可执行 777为二进制111-111 ...