一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS backgrounds</title>

    <style>

    h1 {

        background-color: #6495ed;

    }

    p {

        background-color: #e0ffff;

    }

    div {

        background-color: #b0c4de;

    }

    body {

        background-image: url('paper.gif');

        background-color: #cccccc;

        background-repeat: no-repeat;

        background-position: right top;

        margin-right: 200px;

    }

    body {

        background: #ffffff url("img_tree.png") no-repeat right top;

        margin-right: 200px;

    }

    </style>

</head>

<body>

    <h1>CSS background-color实例!</h1>

    <div>改文本插入在div元素中.</div>

    <p>该段落有自己的背景颜色</p>

    <p>背景图片不重复，设置position实例</p>

    <p>背景图片只显示一次，并与文本分开</p>

    <p>实例中还添加了margin-right属性用于让图片与文本间隔开</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS background背景的更多相关文章

  1. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  2. css中background背景属性概

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

  3. CSS之background——背景与渐变练习题

    1.单选题 将背景的绘制区域规定到内容框,应使用background-clip属性中的哪个属性值? A content-box B border-box C padding-box D none-bo ...

  4. 【Python全栈-CSS】background背景

    background背景 一.背景图片 background-image: url("img/num.png"); background-position-x: -200px ; ...

  5. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  6. [CSS]background背景

    css背景样式 序号  中文说明  标记语法  1  背景颜色  {background-color:数值}  2  背景图片  {background-image: url('imgpath/img ...

  7. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  8. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  9. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

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

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

随机推荐

  1. 算法与数据结构(十一) 平衡二叉树（AVL树）(Swift版)

    今天的博客是在上一篇博客的基础上进行的延伸.上一篇博客我们主要聊了二叉排序树,详情请戳<二叉排序树的查找.插入与删除>.本篇博客我们就在二叉排序树的基础上来聊聊平衡二叉树,也叫AVL树,A ...

  2. Vue 学习笔记 — filter

    简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...

  3. [Swift]LeetCode288. 唯一单词缩写 $ Unique Word Abbreviation

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  4. [Swift]LeetCode703. 数据流中的第K大元素 | Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  5. [Swift]LeetCode961. 重复 N 次的元素 | N-Repeated Element in Size 2N Array

    In a array A of size 2N, there are N+1 unique elements, and exactly one of these elements is repeate ...

  6. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  7. 基于 dubbo 的分布式架构

    前言 现在越来越多的互联网公司还是将自己公司的项目进行服务化,这确实是今后项目开发的一个趋势,就这个点再凭借之前的 SSM 项目来让第一次接触的同学能快速上手. 浅谈分布式架构 分布式架构单看这个名字 ...

  8. 【转】msfvenom使用指南

    msfvenom命令行选项如下: Options: -p, --payload <payload> 指定需要使用的payload(攻击荷载).如果需要使用自定义的payload,请使用'- ...

  9. C# for Python(Nugut Iron包)

    cInronPython是一种在.NET和Mono上实现的Python语言,使用InronPython就可以在.NET环境中调用Python代码 安装InronPython Python: port ...

  10. Python爬虫入门教程 27-100 微医挂号网专家团队数据抓取pyspider

    1. 微医挂号网专家团队数据----写在前面 今天尝试使用一个新的爬虫库进行数据的爬取,这个库叫做pyspider,国人开发的,当然支持一下. github地址: https://github.com ...