1.背景属性

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>05背景相关属性示例</title>

    <style>

        /* 背景颜色 */

        .c0 {

            background-color: red;

        }

        /* 背景图片 */

        /*.c1 {*/

            /*width: 600px;*/

            /*height: 600px;*/

            /*border: 1px solid black; !* 边框，1像素，颜色是黑色 *!*/

            /*background-image: url("huluwa.png");*/

            /*background-repeat: no-repeat;   !* 背景图片不平铺 *!*/

            /*!*background-position: center;    !* 背景图片在中间区域，也可用50% 50% *!*!*/

            /*!*background-position: 50% 50%;*!*/

            /*background-position: 200px 200px;  !* 向x轴和y轴各偏移200像素*!*/

        /*}*/

        /* 简写上面的.c1 */

        .c1 {

            width: 600px;

            height: 600px;

            border: 1px solid black; /* 边框，1像素，颜色是黑色 */

            background: url("huluwa.png") no-repeat 50% 50%; /* 简写成一条 */

        }

    </style>

</head>

<body>

<div class="c0">我是div</div>

<div class="c1"></div>

</body>

</html>

（1）一个鼠标滚动背景图不动的例子

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>06背景不动效果示例</title>

    <style>

        .c1 {

            height: 500px;

            background-color: red;

        }

        .c2 {

            height: 500px;

            background: url("huluwa.png") no-repeat center;

            background-attachment: fixed;   /* 将背景图片固定住，这样在鼠标上限滚动时，这个图片固定住 */

        }

        .c3 {

            height: 500px;

            background-color: green;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>

CSS属性（背景属性）的更多相关文章

  1. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  2. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  3. CSS的 背景属性

    ㈠背景色  background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...

  4. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  5. css基础语法二（常用文本与背景属性）

    [CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...

  6. CSS基本属性—文本属性和背景属性

    一.CSS常用文本属性 [css中的颜色表示方式]   1.直接使用颜色的单词表示:red.green.blue    2.使用颜色的十六进制表示:#ff0000,#00ff00:    六位数,两两 ...

  7. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  8. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  9. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  10. css中background背景属性概

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

随机推荐

  1. 谈谈FTP

    一.关于FTP 1.FTP是什么? FTP,全称"文件传输协议".属于TCP/IP四层模型中的应用层. 2.TCP/IP五层模型有哪些? 如图所示: 用文字叙述(从高层到底层): ...

  2. ansible使用playbook的简单例子(ansible2.9.7)

    一,ansible使用playbook的优点 1,用ansible执行一些简单的任务,使用ad-hoc命令就可以解决问题 如果执行复杂的功能,需要大量的操作,执行的ad-hoc命令会不够方便,这时我们 ...

  3. Helium文档13-WebUI自动化-helium快速切换到selenium状态并调用其方法

    前言 前面说过helium是对Selenium 进行了封装,那么我们如何使用selenium的方法呢,通过下面的介绍,我们能够清楚在helium中能够使用selenium的任何方法 入参介绍 def ...

  4. Flink on Yarn三部曲之三：提交Flink任务

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  5. 作用域 - Js深入理解笔记

    执行期上下文 当函数执行时,会创建一个称为执行上下文的内部对象 一个执行期上下文定义了一个函数所执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,多次调用一个函数会导致创建多个执行上下文,当 ...

  6. CopyTranslator安装与使用

    PDF 格式的文本,本质上是保证了在大部分设备上都能保持清晰完整的排版格式,但不利于进一步使用,但是 PDF 文档文字复制会包括回车键,文字粘粘和翻译都不方便.通常的做法就是,先转换成 Word 格式 ...

  7. 基于PHP实现短信验证码接口的方法

    步骤: 1.登录荣联运通讯注册获取ACCOUNT SID.AUTH TOKEN.Rest URL(生产).AppID(默认): 2.注册测试用手机号码(先注册测试号码方可使用): 3.下载demo示例 ...

  8. sort回调的简单模拟

    本来是准备讲CPP中的std::sort,但因为最近Java用得多,不知怎么的便习惯性走Java角度看问题了,所以这篇文章看起来估计会有点奇怪... 一.简单模拟sort回调 std::sort函数本 ...

  9. 写文档太麻烦，试试这款 IDEA 插件吧！

    前言 每次开发完新项目或者新接口功能等,第一件事就是提供接口文档.说到接口文档,当然是用 Markdown 了.各种复制粘贴字段,必填非必填,字段备注,请求返回示例等等.简直是浪费时间哇.所以想到了开 ...

  10. springboot自动装配原理，写一个自己的start

    springboot自动装配原理 第一次使用springboot的时候,都感觉很神奇.只要加入一个maven的依赖,写几行配置,就能注入redisTemple,rabbitmqTemple等对象. 这 ...