如何利用css给网页添加背景图片?

Jaysun

温馨提示:这篇文章已超过707天没有更新,请注意相关的内容是否还可用!

01.png

为了美化网站,很多网站都会在网站首页或是其他页面设置背景图片,这种突出效果非常有视觉吸引力,也会让访客有吸引眼球的作用,设置网页背景可以直接在网页代码中实现,也可以在CSS中做调整,今天我们就讲讲如何在CSS中设置网页背景图片。


首先我们先了解一下基础的网页代码:

  • background-color: 背景颜色。

  • background-position: 背景图像的位置。

  • background-size: 背景图片的尺寸。

  • background-repeat :重复背景图像。

  • background-origin :背景图片的定位区域。

  • background-clip: 背景的绘制区域。

  • background-attachment: 背景图像是否固定或者随着页面的其余部分滚动。

  • background-image :要使用的背景图像。

再来了解一下原理:

1_副本.png

下面是设置背景图片的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片设置</title>
        <style>
            .demo{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 1000px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(2.png);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
</html>

看一下效果:

2_副本.jpg

好了这就是用CSS简单设置背景图片的教程,大家可以自己操作一下。

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,2616人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码