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

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

加林森 发表于 2022-1-6 12:03
得看是什么人说的。

{:4_170:}

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

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

<div class="yR">
<pre>

                背景图片纵向重复：

                margin: 4px auto;
                border: 1px solid olive;
                width: 600px;
                height: 400px;
                background-image: url('图片地址');
                background-repeat: repeat-y;

</pre>
</div>

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

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


开森

马黑黑 发表于 2022-1-6 13:02

<style class="text/css">
.imgPs {
        margin: 3px auto;
        width: 600px;
        height: 400px;
        border: 1px solid #444;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-position: right bottom;
        background-repeat: no-repeat;
}
</style>

<div class="imgPs">
<pre>
背景图片定位：

        margin: 3px auto;
        width: 600px;
        height: 400px;
        border: 1px solid #444;
        background-image: url('图片地址');
        background-position: right bottom;
        background-repeat: no-repeat;

/*背景图片不重复时定位才有效果！
        right，left，top，bottom 单独使用时，
      另一个值默认为 center；center 单独
        使用时居中。还可以用像素值、百分比
*/
</pre></div>

马黑黑 发表于 2022-1-6 13:13

<style type="text/css">
.imgSize {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        border: 1px solid #aaa;
        background-image: url('https://638183.freep.cn/638183/Pic/15.png');
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 200px 200px;
}
</style>

<div class="imgSize">
<pre>
背景图片大小设置：

        margin: 0 auto;
        width: 600px;
        height: 400px;
        border: 1px solid #aaa;
        background-image: url('图片地址');
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 200px 200px;

</pre>
</div>

<p>实图：<br>&nbsp;</p>

<img alt="475×475" src="https://638183.freep.cn/638183/Pic/15.png">

红影 发表于 2022-1-6 13:18

看到你的命令里好像都是先加个color: white;然后才加背景色，这个color: white;是必须的么？

红影 发表于 2022-1-6 13:19

惊叹于黑黑对这些功能应用得得心应手{:4_199:}

马黑黑 发表于 2022-1-6 14:24

红影 发表于 2022-1-6 13:18
看到你的命令里好像都是先加个color: white;然后才加背景色，这个color: white;是必须的么？

color 是前景色，与背景图片配套的文本颜色，使得文字、底色的对比度提升，便于阅读。

背景色、背景图片的核心代码基本都只是 background 前缀的属性命令

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

红影 发表于 2022-1-6 13:19
惊叹于黑黑对这些功能应用得得心应手

我杀猪更顺手

马黑黑 发表于 2022-1-6 14:44

<style calss="text/css">
.clipcbox {
        margin: 0 auto;
        color: white;
        width: 600px;
        height: 400px;
        padding: 10px;
        border: 8px dotted olive;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-clip: content-box;
}
</style>

<div class="clipcbox">
<pre>   

背景裁剪 content - 剪切成内容框

        margin: 0 auto;
      color: white;
        width: 600px;
        height: 400px;
        padding: 10px;
        border: 8px dotted olive;
        background-image: url('图片地址');
        background-clip: content-box;
</pre>
</div>

马黑黑 发表于 2022-1-6 14:52

<style type="text/css">
.clippadding {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-clip: padding-box;
}
</style>

<div class="clippadding">
<pre>   
背景剪切成内边距框（padding）：

        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('图片地址');
        background-clip: padding-box;
</pre>
</div>

马黑黑 发表于 2022-1-6 14:59

<style type="text/css">
.clipborder {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-clip: border-box;
}
</style>

<div class="clipborder">
<pre>   

    背景剪切成边框方框（border-box）：

        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('图片地址');
        background-clip: border-box;
</pre>
</div>

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

<style type="text/css">
.twobg {
        margin: 2px auto;
        width: 600px;
        height: 400px;
        color: #fff;
        background-image: url('https://638183.freep.cn/638183/Pic/15.png'), url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png');
        background-position: 95% 5%, top right;
        background-repeat: no-repeat,repeat;
        background-size: 150px 150px, 40px 40px;
}
</style>

<div class="twobg">
<pre>

双图背景：
        margin: 2px auto;
        width: 600px;
        height: 400px;
        color: #fff;
        background-image: url('图1'), url('图2');
        background-position: 95% 5%, top right;
        background-repeat: no-repeat,repeat;
        background-size: 150px 150px, 40px 40px;

/*多图做背景时，重复平铺的图放在最后，否则前面
   的图会被覆盖！重复的图位置随意设置。
*/

</pre>
</div>

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

<style type="text/css">
.dtDiv {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        background: url('https://www.huachaowang.com/static/image/common/medal40.gif') no-repeat 10% 90%, url('https://638183.freep.cn/638183/Pic/15.png') no-repeat 95% 5%,
url('https://www.huachaowang.com/data/attachment/forum/202201/06/095954fswbsbviw4s43z7b.png') repeat left top;
        background-size: 30px 30px, 200px 200px, 120px 120px;
        color: white;
}
</style>

<div class="dtDiv">
<pre>   
多图背景：

        margin: 0 auto;
        width: 600px;
        height: 400px;
        background: url('图1') no-repeat 10% 90%, url('图2') no-repeat 95% 5%,
url('图3') repeat left top;
        background-size: 30px 30px, 200px 200px, 120px 120px;
        color: white;
</pre>
</div>

红影 发表于 2022-1-6 16:24

马黑黑 发表于 2022-1-6 14:24
color 是前景色，与背景图片配套的文本颜色，使得文字、底色的对比度提升，便于阅读。

背景色、背景图 ...

嗯，看到一只有这个，没明白，现在知道了{:4_204:}

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

红影 发表于 2022-1-6 16:24
嗯，看到一只有这个，没明白，现在知道了

嗯嗯，前景色和背景色有一定的对比度是友好的

红影 发表于 2022-1-6 16:31

马黑黑 发表于 2022-1-6 14:59
.clipborder {
        margin: 0 auto;
        width: 600px;


这三楼放一起，倒是对着几个命令的理解更深入了。前面觉得都是边界的含义，还有点迷糊{:4_173:}

马黑黑 发表于 2022-1-6 17:16

红影 发表于 2022-1-6 16:31
这三楼放一起，倒是对着几个命令的理解更深入了。前面觉得都是边界的含义，还有点迷糊

还需要自己动手，修改一些设定查看效果，这样就更清楚

马黑黑 发表于 2022-1-6 17:57

加林森 发表于 2022-1-6 17:59

<style type="text/css">
.clipborder {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('https://f.sinaimg.cn/tech/transform/412/w199h213/20210309/0a02-kmeeius1088795.gif');
        background-clip: border-box;
}
</style>

<div class="clipborder">
<pre>   

    背景剪切成边框方框（border-box）：

        margin: 0 auto;
        width: 600px;
        height: 400px;
        color: #fff;
        border: 8px dotted #cc6699;
        background-image: url('https://f.sinaimg.cn/tech/transform/412/w199h213/20210309/0a02-kmeeius1088795.gif');
        background-clip: border-box;
</pre>
</div>

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