纯色背景

示例

<h1>CSS background-color 实例!</h1>

样式background-color

h1
{
	background-color:#6495ed;
}

纯色背景效果

背景设置为图片

示例

<h1>Hello World!</h1> 

样式

body 
{
	background-image:url('paper.gif');
	background-color:#cccccc;
}

背景图片效果

 

背景平铺

示例

<h1>Hello World!</h1>
    
<h2>Hello World!</h2>

<div>
    <h3>Hello World!</h3>
</div>

设置样式no-repeat，repeat-x，repeat-y

h1
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:no-repeat;
}
	
h2
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-x;
}

div
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-y;
	height:300px;
}

效果

背景图片的位置

示例

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

样式background-position

body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}

效果（我们发现背景是在右上方绘制的）

固定背景

固定背景在整幅背景不随内容滚动的场景使用。

示例

<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>
</body>

样式background-attachment：fixed

body 
{
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

效果（上下滚动时，body的背景图片不会随之滚动）

 

背景图片的层级：首先设置的图片资源会浮在最上层（z-index最大），否则容易被遮盖。

设置两种不同的背景

示例

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

背景样式

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

 这里分别设置了background-image的属性，img_flwr.gif在最上层。它是在右下角进行渲染的，不重复渲染。paper.gif是在左上角开始渲染的，重复渲染。

也可以直接设置样式，效果是一致的：

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}

背景效果

注意，这里 img_flwr.gif必须最先指定，否则会被paper.gif遮盖住。

# css # 前端 # css3
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区