学生简单网页设计中CSS背景图片的各种属性介绍

发布时间:2020-03-08   文章分类:网页技术课堂

学生在制作网页设计作业时,经常需要简单做个网页背景图,CSS背景图片属性有很多种,今天为大家介绍几种常用的适合学生网页作业设计的方法。

background-repeat:设置图片平铺方式
有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(图片在垂直方向上平铺)

background-position:确定图片显示的位置
background-position: 30px 50px;   图片在水平方向上向右偏移30px,在垂直方向上偏移50px
background-position:  right bottom;  图片显示在右下角
background-position:  center;     图片显示在中间
background-position: right top;   图片显示在右上角
background-position: left bottom;    图片显示在左下角
background-position: center top;    图片显示在上中间
 
background-size:背景图片的大小
background-size: 100%  100%;    背景图片的大小
background-size: contain;   contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现布局填充不完整。
background-size: cover;   cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出。
 
————————————————
STU-WORK代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 400px;
            border: 1px solid red;/*1px的红色实线*/
            background-color: blue;
            background-image: url("../../img/lianxiang.jpg");
 
            background-repeat: no-repeat;/*1、no-repeat 图片保留自身大小,不平铺
                                          2、repeat-x 水平方向上图片平铺
                                          3、repeat-y 垂直方向上图片平铺*/

       
            background-position: center top;
            /*background-size: 100% 100%;*/ /*背景图片的大小*/
            /*background-size: contain;*//*contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现图片填充布局不完整*/
            background-size: cover; /*cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出*/
 
 
        }
    </style>
    <title>背景图片</title>
</head>
<body>
<div>

</div>
</body>
</html>

STU网页公众号

专注于Dreamweaver网页设计作业,大学生DW网页作业定制,HTML静态网页制作作业,简单网页作业成品模版免费下载,高中至大学一二三年级网站作业定制设计...