<!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. Spring-boot:5分钟整合Dubbo构建分布式服务

    概述: Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常 ...

  2. Eclipse连接SQL Server 2008数据库 以及问题总结

    Eclipse中使用SQL server 2008数据库 一.准备材料 要能够使用数据库就要有相应的JDBC,所以我们要去Microsoft官网下载 https://www.microsoft.com ...

  3. Flip Game poj 1753

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29731   Accepted: 12886 Descr ...

  4. postman - 基本操作

    设置环境 collections 导入 runner 导入 api 配置api 编写测试(请求和响应)脚本 api的保存和导出 setting file -- setting

  5. 【转】 中兴OLT-C300常用命令

    中兴OLT C300show running-config (加载各种板卡)show gpon onu uncfg (查看OLT所有未配置的ONU)show gpon onu uncfg gpon-o ...

  6. WPF自定义命令和处发命令

    接实现ICommand接口的命令.在介绍之前,先看一下ICommand接口的原型: event EventHandler CanExecuteChanged; bool CanExecute(obje ...

  7. wpf 画刷的分类

    System.Windows.Media.Brush最上一层画刷 System.Windows.Media.GradientBrush  线性画刷 ,下层主要有两种画刷 System.Windows. ...

  8. centos 7.3二进制安装mariadb10.2.8完美步骤

    (1)在centos7系统上,yum info mariadb可以找到提供mariadb包的官方网站,在到官方网站下载最新的mariadb包,然后rz到linux系统上去 (2)准备用户 1.user ...

  9. 初学者易上手的SSH-struts2 02Action获取表单数据-通配符

    在上一章中,我们已经搭建好了struts2的一个开发环境,那么这一章就来做一个简单的登录功能,以及介绍和使用struts2里面一个重要的东西-通配符. 第一步,在WebContent下面新建一个log ...

  10. PHP知识大全

    --------------------------------------------------------- PHP知识大全 ---------------------------------- ...