CSS 背景实例 

CSS 背景属性
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment  背景图像是否固定或者随着页面的其余部分滚动。
background-color   设置元素的背景颜色。
background-image   把图像设置为背景。
background-position    设置背景图像的起始位置。
background-repeat  设置背景图像是否及如何重复。

#############
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

可能的值
值  描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x   背景图像将在水平方向重复。
repeat-y   背景图像将在垂直方向重复。
no-repeat  背景图像将仅显示一次。
inherit    规定应该从父元素继承 background-repeat 属性的设置。
################
 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响

 ##############

1.设置背景颜色
本例演示如何为元素设置背景颜色。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body { padding: 20px;}
    </style>
</head>
<body>
<h1>header 1</h1>
<h2>header 2</h2>
<p>A paragraph.</p>
<p class="no2">这个段落设置了内边距</p>
</body>

2.设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
###
span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。
###
实例1
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span.highlight
        {
            
        }
    </style>
</head>
<body>
<p>
    <span class="highlight"> 这是文本</span>
    这是文本。
    <span class="highlight">这是文本。</span>
</p>

</body>

3.将图像设置为背景
本例演示如何将图像设置为背景。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-image: url(bj2.png);}
    </style>
</head>
<body>

</body>

4.如何重复背景图像
本例演示如何重复背景图像。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-image:
                url(bj1.png);
        background-repeat: repeat}
    </style>
</head>
<body>

</body>

5.如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。

<style type="text/css">
    body
    {
    background-image:
    url(bj2.png);
    background-repeat: repeat-y
    }
</style>

</head>
<body>

</body>
6.如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。

<head>
    <style type="text/css">
        body
        { background-image: url("bj2.png");
        background-repeat: repeat-x;
        }
    </style>
</head>
<body>

</body>

7.如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。

<head>
    <style type="text/css">
        body
        {
            background-image: url("bj1.png");
            background-repeat: no-repeat;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

8.如何放置背景图像
本例演示如何在页面上放置背景图像。

<head>
    <style type="text/css">
        body
        {
            background-image: url("bj2.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }
    </style>
</head>
<body>

<p><b>提示</b>
    您需要把background-attachment 属性设置为“fixed”, 才能保证该属性在firefox 和opera 中正常工作。
</p>
</body>

9.如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
<head>
    <style type="text/css">
        body
        {
            background-image: url("bj2.png");
            background-repeat:no-repeat;
            background-attachment: fixed;
            background-position: 30% 20%;
        }
    </style>
    <meta charset="UTF-8" >
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body>

10.如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body
        {
            background-image: url("bj2.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 50px 100px;
        }
    </style>
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>

</body>

11.如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body
        {
            background-image: url("bj2.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>
<p>图像不会随页面的其余部分滚动。</p>
</body>

12.所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body
        {
            background: red url("bj2.png") no-repeat fixed center;
        }
    </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>
posted @   Mr.zou  阅读(205)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

点击右上角即可分享
微信分享提示
SQL AI 助手