论坛 › 马黑黑教程专版 › CSS背景演示

马黑黑 发表于 2022-1-6 10:00

CSS背景演示

本帖最后由 马黑黑 于 2022-1-6 16:23 编辑

本帖以回复的方式演示 CSS 背景效果：

static/image/hrline/5.gifstatic/image/hrline/5.gif

☞ 一、纯色
☞ 二、纯色 + opacity透明
☞ 三、纯色 + rgba透明
☞ 四、默认背景图
☞ 五、默认背景图 + opacity透明
☞ 六、背景图片不重复
☞ 七、背景图片横向重复
☞ 八、背景图片纵向重复
☞ 九、背景图片定位
☞ 十、背景图片大小设置
☞ 十一、背景剪切成内容框
☞ 十二、背景剪切成内边距框
☞ 十三、背景剪切成边框方框
☞ 十四、双图背景
☞ 十五、多图背景

static/image/hrline/5.gifstatic/image/hrline/5.gif



本帖所用的的图片（2P）：



https://638183.freep.cn/638183/Pic/15.png

马黑黑 发表于 2022-1-6 10:09

<style type="text/css">
.bgcDiv {
        margin: 6px auto;
        color: white;
        width: 600px;
        height: 400px;
        background-color: olive;
}
</style>

<div class="bgcDiv">
        <pre>

纯色背景

        margin: 6px auto;
        color: white;
        width: 600px;
        height: 400px;
        background-color: olive;

        </pre>
</div>

加林森 发表于 2022-1-6 10:24

这个我得好好看看。谢谢老黑！{:4_190:}

马黑黑 发表于 2022-1-6 10:25

加林森 发表于 2022-1-6 10:24
这个我得好好看看。谢谢老黑！

谢茶

加林森 发表于 2022-1-6 10:29

马黑黑 发表于 2022-1-6 10:25
谢茶

谢谢你的教程了啊。{:5_108:}

马黑黑 发表于 2022-1-6 10:36

<style type="text/css">
.cO {
        margin: 6px auto;
        color: #fff;
        width: 600px;
        height: 400px;
        background-color: #000;
        opacity: 0.6;
}
</style>

<div class="cO">
        <pre>

纯色 + opacity透明：（黑色背景）

        margin: 6px auto;
        color: #fff;
        width: 600px;
        height: 400px;
        background-color: #000;
        opacity: 0.6;

        </pre>
</div>

马黑黑 发表于 2022-1-6 10:38

加林森 发表于 2022-1-6 10:29
谢谢你的教程了啊。

{:4_180:}

加林森 发表于 2022-1-6 10:42

马黑黑 发表于 2022-1-6 10:38


谢茶

马黑黑 发表于 2022-1-6 11:07

<style type="text/css">
.cAl {
        margin: 6px auto;
        color: #fff;
        width: 600px;
        height: 400px;
        background-color: rgba(0,0,0,0.4);
}
</style>

<div class="cAl">
        <pre>

纯色 + rgba透明

        margin: 6px auto;
        color: #fff;
        width: 600px;
        height: 400px;
        background-color: rgba(0,0,0,0.4);

        </pre>
</div>

加林森 发表于 2022-1-6 11:14

继续研究

马黑黑 发表于 2022-1-6 11:19

<style type="text/css">
.imgDiv {
        margin: 6px auto;
        width: 600px;
        height:400px;
        color: white;
        background: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
/* 或者
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
*/
}
</style>

<div class="imgDiv">
<pre>

默认值背景图：

        margin: 6px auto;
        width: 600px;
        height:400px;
        color: white;
        background: url('图片地址');
/* 或者
        background-image: url('图片地址');
*/
</pre>
</div>

马黑黑 发表于 2022-1-6 11:21

加林森 发表于 2022-1-6 11:14
继续研究

应该不难的吧

加林森 发表于 2022-1-6 11:24

马黑黑 发表于 2022-1-6 11:21
应该不难的吧

不难的，讲得很明白。谢谢老黑！{:4_190:}

马黑黑 发表于 2022-1-6 11:34

<style type="text/css">
.imgO {
        margin: 6px auto;
        width: 600px;
        height:400px;
        color: white;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        opacity: .8;
}
</style>

<div class="imgO">
<pre>

默认背景图 + opacity透明

        margin: 6px auto;
        width: 600px;
        height: 400px;
        color: white;
        background-image: url('图片地址');
        opacity: .8;


</pre>
</div>

马黑黑 发表于 2022-1-6 11:37

加林森 发表于 2022-1-6 11:24
不难的，讲得很明白。谢谢老黑！

嗯嗯，俺都是说人话的

加林森 发表于 2022-1-6 11:48

马黑黑 发表于 2022-1-6 11:37
嗯嗯，俺都是说人话的

万一你说黑话我就搞不懂了。{:4_170:}

马黑黑 发表于 2022-1-6 11:54

<style type="text/css">
.imgA {
        margin: 6px auto;
        border: 1px solid olive;
        width: 600px;
        height:400px;
        color: green;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-repeat: no-repeat;
}
</style>

<div class="imgA">
<pre>







背景图片不重复

        margin: 6px auto;
        border: 1px solid olive;
        width: 600px;
        height:400px;
        color: green;
        background-image: url('图片地址');
        background-repeat: no-repeat;
</pre>
</div>

马黑黑 发表于 2022-1-6 11:56

加林森 发表于 2022-1-6 11:48
万一你说黑话我就搞不懂了。

黑人说白话你听懂不

加林森 发表于 2022-1-6 12:03

马黑黑 发表于 2022-1-6 11:56
黑人说白话你听懂不

得看是什么人说的。

马黑黑 发表于 2022-1-6 12:19

<style type="text/css">
.xrepeat {
       margin: 4px auto;
       width: 600px;
       height: 400px;
       border: 1px solid olive;
       background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
       background-repeat: repeat-x;
}
</style>

<div class=" xrepeat">
<pre>






背景图片横向重复：

       margin: 4px auto;
       width: 600px;
       height: 400px;
       border: 1px solid olive;
       background-image: url('图片地址');
       background-repeat: repeat-x;
</pre>
</div>

查看完整版本: CSS背景演示