一，效果图。

二，代码。

<!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. C# 开源组件--NPOI读取Excel单元格中的公式值

    今天在项目中碰到了EXCEL导入的数据是用公式生成,直接导入不了数据,写在博客中方便自已查询也可以给想找这方面的参考一下: 用NPOI导入时,在OFFICE 2007中的文件导入时一般会用XSSF,所 ...

  2. NumPy库实现矩阵计算

    随着机器学习技术越来越向着整个社会进行推广,因此学好线性代数和Python当中的numpy库就相当重要了.我们应该知道numpy库的使用是sklearn库和opencv库的基础.主要用于矩阵的计算.当 ...

  3. APP测试流程的总结

    本规范基于app大小版本测试经验总结. 第一阶段:需求分析(技术+产品) 1. 新需求是否合理 2. 新旧需求时否存在冲突 3. 理出测试重点 4. 估算测试时间 5. 不熟悉的需求点,确认(负责人, ...

  4. [Swift]LeetCode126. 单词接龙 II | Word Ladder II

    Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformat ...

  5. [Swift]LeetCode291. 单词模式 II $ Word Pattern II

    Given a pattern and a string str, find if strfollows the same pattern. Here follow means a full matc ...

  6. [Swift]LeetCode299. 猜数字游戏 | Bulls and Cows

    You are playing the following Bulls and Cows game with your friend: You write down a number and ask ...

  7. [Swift]LeetCode398. 随机数索引 | Random Pick Index

    Given an array of integers with possible duplicates, randomly output the index of a given target num ...

  8. Python Django(WEB电商项目构建)

    (坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...

  9. Python内置函数(13)——complex

    英文文档: class complex([real[, imag]]) Return a complex number with the value real + imag*1j or convert ...

  10. 并发编程（一）—— volatile关键字和 atomic包

    本文将讲解volatile关键字和 atomic包,为什么放到一起讲呢,主要是因为这两个可以解决并发编程中的原子性.可见性.有序性,让我们一起来看看吧. Java内存模型 JMM(java内存模型) ...