一，效果图。

二，代码。

<!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. 利用Python实现对Web服务器的目录探测

    今天是一篇提升技能的干货分享,操作性较强,适用于中级水平的小伙伴,文章阅读用时约3分钟. PART 1/Python Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python ...

  2. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  3. java 随机数产生 常用类及方法

    1.Random类 Random():创建一个新的随机数生成器. new一个Random类的对象: Random r = new Random(); 利用该对象产生一个随机整数:常用nextInt,不 ...

  4. scala调用Linux命令行

    在 scala 里面存在 调用 Linux 命令行的函数: import scala.sys.process._ 执行的方法也不难: import scala.sys.process._ /** * ...

  5. Python内置函数(55)——round

    英文文档: round(number[, ndigits]) Return the floating point value number rounded to ndigits digits afte ...

  6. 1.MySQL(一)

    数据库简介 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库 RDBMS 即关系数据库管理系统(Relational Database Management System) 1.特 ...

  7. 「造个轮子」——cicada 设计一个配置模块

    前言 在前两次的 cicada 版本中其实还不支持读取配置文件,比如对端口.路由的配置. 因此我按照自己的想法创建了一个 issue ,也收集到了一些很不错的建议. 最终其实还是按照我之前的想法来做了 ...

  8. MVC从Controller到View的呈现

    图说MVC底层运行机制: 当路由机制已经激活Controller并InvokeAction后,如果返回的是View, 则ViewResult基于View呈现的请求响应机制内部借助MVC提供的View引 ...

  9. Android--调用系统照相机拍照与摄像

    前言 在很多场景中,都需要用到摄像头去拍摄照片或视频,在照片或视频的基础之上进行处理.但是Android系统源码是开源的,很多设备厂商均可使用,并且定制比较混乱.一般而言,在需要用到摄像头拍照或摄像的 ...

  10. mybatis中的动态SQL

    在实际开发中,数据库的查询很难一蹴而就,我们往往要根据各种不同的场景拼接出不同的SQL语句,这无疑是一项复杂的工作,我们在使用mybatis时,mybatis给我们提供了动态SQL,可以让我们根据具体 ...