一，效果图。

二，代码。

<!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. Java实现单例模式的9种方法

    一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...

  2. Node.js(day3)

    一.模块系统 1.什么是模块 Node.js中常用的核心模块有: http模块 fs文件系统模块 url模块 path模块 os系统模块 在使用Node.js中我们发现每个js之间是没有联系的,都是单 ...

  3. [Swift]LeetCode215. 数组中的第K个最大元素 | Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  4. Redis 设计与实现 （八）--排序、慢查询日志、监视器

    一.排序 SORT <key>  对一个数字值的key进行排序 1.alpha 对字符串类型的键进行排序 2.asc / desc redis 默认升序排序asc desc 与之相反 3. ...

  5. linux运维架构师职业规划

    1.假如你从来未接触过Linux的话,首先要做的就找一本指导书来学习.现在公认的Linux的入门书籍是“鸟哥的私房菜”,讲的很全面,鸟哥的私房菜一共分为两部,一部是基础篇,一部是服务器篇.“鸟哥的私房 ...

  6. BBS论坛（十五）

    15.1.登录界面完成 (1)front/signbase.html {% from 'common/_macros.html' import static %} <!DOCTYPE html& ...

  7. 了解 HTTPS，读这篇文章就够了

    今天接到个活儿,让我科普 HTTPS .讲 HTTP 我都“方”,想要通俗易懂的说完 HTTPS, 我有点“圆”.在讲什么是 HTTPS 之前,我们先来看个漫画.   △ 图片来源于阮一峰的网络日志 ...

  8. java多线程（6）---ThreadLocal

    ThreadLocal 什么是ThreadLocal? 顾名思义它是local variable(线程局部变量).它的功用非常简单,就是为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可 ...

  9. Visual Studio 2017中使用SourceLink调试ASP.NET Core源码

    背景 当我们在学习ASP.NET Core或者调试ASP.NET Core程序的时候,有时候需要调试底层代码,但是当我们在Visual Studio中调试程序的时候,由于一些基础库或者第三方库缺少pd ...

  10. RabbitMQ学习笔记（六） RPC

    什么RPC? 这一段是从度娘摘抄的. RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的 ...