菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8706 人 2年前

轻松学会Laravel-项目篇（商城API）

2027 人 2年前

Python数据分析2.0-金融

328 人 2年前

Python办公自动化2.0

243 人 2年前
阅读(18) 书签 赞(0) 我要纠错

CSS背景

原创
CSS教程
05/13 14:22 更新
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

设置页面的背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    body
    {
    	background-color:#b0c4de;
    }
</style>
</head>
<body>

    <h1>我的 CSS web 页!</h1>
    <p>你好 学习猿地 ！这是来自学习猿地教程的实例。</p>

</body>
</html>

设置不同元素的背景颜色

<!DOCTYPE html>
<html>
<head>
    <mate  charset="utf-8"> 
    <title>学习猿地</title>
    <style>
        h1
        {
        	background-color:#6495ed;
        }
        p
        {
        	background-color:#e0ffff;
        }
        div
        {
        	background-color:#b0c4de;
        }
    </style>
</head>

<body>

    <h1>CSS background-color 实例!</h1>
    <div>
    改文本插入在 div 元素中。
        <p>该段落有自己的背景颜色。</p>
    我们仍然在同一个 div 中。
    </div>

</body>
</html>

设置一个图像作为页面的背景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    body 
    {
    	background-image:url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png');
    	background-color:#cccccc;
    }
</style>
</head>

<body>
    <h1>Hello 学习猿地!</h1>
</body>

</html>

错误的的背景图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
    <style>
    	body {background-image:url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png');}
    </style>
</head>

<body>
    <h1>Hello 学习猿地</h1>
    <p>该文本不容易被阅读。</p>
</body>

</html>

如何在水平方向重复背景图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    body
    {
    	background-image:url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png');
    	background-repeat:repeat-x;
    }
</style>
</head>

<body>
    <h1>Hello 学习猿地!</h1>
</body>

</html>

如何定位背景图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    body
    {
    	background-image:url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png');
    	background-repeat:no-repeat;
    	background-position:right top;
    	margin-right:200px;
    }
</style>

</head>

<body>
    <h1>你好，学习猿地！</h1>
    <p>背景图片不重复，设置 position 实例。</p>
    <p>背景图片只显示一次，并与文本分开。</p>
    <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

</html>

一个固定的背景图片（这个图片不会随页面的其余部分滚动）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title>
<style>
    body 
    {
    background-image:url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png');
    background-repeat:no-repeat;
    background-attachment: fixed
    }
</style>
</head>

<body>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>
    <p>背景图像是固定的， 试着向下滚动页面。</p>

</body>

</html>

在一个声明的所有背景属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    body
    {
    	background:#ffffff url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png') no-repeat right top;
    	margin-right:200px;
    }
</style>

</head>

<body>
    <h1>你好，学习猿地！</h1>
    <p>现在背景图像只显示一次，而且它的位置也远离文本。</p>
    <p>在这个例子中，我们还在右边添加了一个边距，这样背景图像就不会干扰文本。</p>
</body>

</html>

高级的背景例子

<!DOCTYPE html>
<html>
<head>
<style>
    body
    {
    margin-left:200px;
    background:#5d9ab2 url('https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png') no-repeat top left;
    }
    
    .container
    {
    text-align:center;
    }
    
    .center_div
    {
    border:1px solid gray;
    margin-left:auto;
    margin-right:auto;
    width:90%;
    background-color:#d0f0f6;
    text-align:left;
    padding:8px;
    }
</style>
</head>

<body>
    <div class="container">
        <div class="center_div">
            <h1>Hello 学习猿地!</h1>
            <p>这个例子包含了一些你可能还没有学过的高级CSS方法, 但是，我们将在本教程后面的章节中解释这些方法。</p>
        </div>
    </div>
</body>
</html>

推荐文章

推荐教程

推荐课程

    © 著作权归作者所有

    举报
    综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论

    学习猿地
    程序员学习的地方

    扫码关注

    成就自己的只需一套精品