<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<p>测试能否被继承</p>
<h2>啦啦啦啦啦啦啦啦</h2>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
</body>
</html>

 
body {
    background: blue;
    /*背景颜色,不能被继承*/
    background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
    /*设置图片*/
    width: 900px;
    height: 900px;
    background-size: 500px 500px;
    /*设置图片大小*/
    background-repeat: no-repeat;
    /*设置图片不允许重复*/
    background-attachment: fixed;
    /*设置滚动页面的时候图片不滚动*/

}

p {
    width: 150px;
    height: 20px;
    background: red;
}

h2 {
    background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
    /*设置图片*/

    background-repeat: repeat;
    /*设置图片允许重复(默认)*/
    background-repeat: repeat-x;
    /*设置图片X轴可以重复*/
    background-repeat: repeat-y;
    /*设置图片y轴可以重复*/
    background-repeat: no-repeat;
    /*设置图片不允许重复*/
    background-position: right center;
    /*设置图片起始位置可以写入 100px 100px*/

}

HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表的更多相关文章

  1. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  2. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  3. JAVAscript学习笔记 js计时器与倒计时 第六节 (原创) 参考js使用表

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

  4. amazeui学习笔记--css(基本样式4)--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  5. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  6. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  7. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  8. amazeui学习笔记--css(常用组件10)--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  9. amazeui学习笔记--css(布局相关3)--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

随机推荐

  1. Disharmony Trees 树状数组

    Disharmony Trees Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Su ...

  2. Ubuntu12.04 Firefox安装flash

    1. 实验环境 Ubuntu 14.04x86 2.安装步骤 2.1 浏览器访问:https://get.adobe.com/flashplayer/?loc=cn 2.2 网址会自动识别ubuntu ...

  3. jq 通过标签属性匹配标签

    有时候会有这样的需求 在一堆的标签中定位到某个标签去获取值 这时候我们就可以通过使用自定义属性将这一堆标签打上不同的标记 通过属性定位标签了 下面是代码: <input class=" ...

  4. asp.net数据四舍五入

    #region 数据四舍五入 /// <summary> /// 四舍五入 /// </summary> /// <param name="dblnum&quo ...

  5. 为db2用户添加db2命令及jdk环境变量配置

    AIX系统:db2inst用户 在/home/db2inst/.profile文件下新增以下代码(包括用户环境变量配置,具体路径取决于jdk安装的路径) PATH=/usr/bin:/etc:/usr ...

  6. 如何从MVP模式进阶到Clean模式

    从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...

  7. 1、Http概述

    1.1 Web客户端和服务器 HTTP 客户端和 HTTP 服务器共同构成了万维网的基本组件,客户端向服务器发送 HTTP 请求, 服务器会在 HTTP 响应中回送所请求的数据. 示意图: 1.2 媒 ...

  8. Java设计模式(四)——再谈观察者模式

    在本系列的上一篇文章中,我们讨论了JDK对于观察者模式的一套实现.今天我们将要从另一个角度来探索Tomcat中是如何利用观察者模式加载各个组件.不过今天的任务不是解释Tomcat,所以我会单独把重点抽 ...

  9. faster-rcnn中ROI_POOIING层的解读

    在没有出现sppnet之前,RCNN使用corp和warp来对图片进行大小调整,这种操作会造成图片信息失真和信息丢失.sppnet这个模型推出来之后(关于这个网络的描述,可以看看之前写的一篇理解:ht ...

  10. [mysql使用(3)] 使用mysql的时候遇到的一些错误

    1.Err1055,出现这个问题往往是在执行sql语句时候,在最后一行会出现这个问题. [Err] 1055 - Expression #1 of ORDER BY clause is not in ...