一，效果图。

二，代码。

<!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. vue+mescroll=VScrollFull

    VScrollFull 介绍 这个组件是什么? 是为了方便的使用下拉刷新,上拉加载而去封装的一个依赖于 mescroll.js 的 vue 组件(未发布,文末代码~) 封装这个组件使用了什么? mes ...

  2. 【RL-TCPnet网络教程】第12章 TCP传输控制协议基础知识

    第12章      TCP传输控制协议基础知识 本章节为大家讲解TCP(Transmission Control Protocol,传输控制协议),通过本章节的学习,需要大家对TCP有个基本的认识,方 ...

  3. 【RL-TCPnet网络教程】第4章 RL-TCPnet网络协议栈简介

    第4章        RL-TCPnet网络协议栈简介 本章节介绍RL-TCPnet网络协议栈,让大家对 RL-TCPnet有一个整体的了解,RL-TCPnet是一款小型网络协议栈,适用于 ARM 内 ...

  4. [SQL]LeetCode262.行程和用户 | Trips and Users

    SQL架构 Create table If Not Exists Trips (Id )) Create table If Not Exists Users (Users_Id ), Role ENU ...

  5. [Swift]LeetCode322. 零钱兑换 | Coin Change

    You are given coins of different denominations and a total amount of money amount. Write a function ...

  6. [Swift]LeetCode354. 俄罗斯套娃信封问题 | Russian Doll Envelopes

    You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...

  7. [Swift]LeetCode698. 划分为k个相等的子集 | Partition to K Equal Sum Subsets

    Given an array of integers nums and a positive integer k, find whether it's possible to divide this ...

  8. [Swift]LeetCode706. 设计哈希映射 | Design HashMap

    Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...

  9. [Swift]LeetCode1004. 最大连续1的个数 III | Max Consecutive Ones III

    Given an array A of 0s and 1s, we may change up to K values from 0 to 1. Return the length of the lo ...

  10. 北上广等一线城市IT岗位已接近饱和？

    IT行业的技术者,时常被我们戏称为「IT民工」,虽然行业内巨大的人才需求和相对容易得到的高薪在源源不断的吸引各路人马加入,但它依旧在全球最缺人的十大行业中位居榜首. 我身边的朋友大都问过我这样一个疑问 ...