如何在css中添加背景图?

在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。

css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。

下面看看background可以设置的属性:

  • background-color: 规定要使用的背景颜色。

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

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

  • background-repeat :规定如何重复背景图像。

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

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

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

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

可以看出background-image属性就是给html页面设置背景图片的属性,下面看看它的用法

background-image:url(1.jpg-600);

这样在url()里给出图片的路径,就可以给div盒子设置一个背景图片;看似简单,但有一点要注意,设置背景图片的盒子必须要有实质的宽度与高度,这样才可以让背景图片在显示屏上显示。

上面的这些background属性如果一个一个的设置是不是感到繁琐,其实有些属性是可以放在一起设置的,这样的css背景表达可以节约且优化了css文件代码。例:

background:url(bgimg.gif) no-repeat 5px 5px;

css设置背景图片的代码实例

1.css设置背景图片自适应全屏

<!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-600);
                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>

效果图:

1.jpg-600

以上就是如何在css中添加背景图?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑