526互联

CSS-background 背景图片

发布时间 2023-11-30 17:44:47作者: 学Java的`Bei

更多CSS进阶： https://www.cnblogs.com/warmNest-llb/p/17866954.html

 

1.背景介绍

　　元素的背景属性：

　　　　background 简写属性，作用是将背景属性设置在一个声明中。
　　　　background-attachment：背景图像是否固定或者随着页面的其余部分滚动。scroll 默认值。 /fixed 当页面的其余部分滚动时，背景图像不会移动。
　　　　background-color：设置元素的背景颜色。
　　　　background-image：把图像设置为背景。
　　　　background-position：设置背景图像的起始位置。属性可以是百分比：%；单位：px ；也可以是 left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将时"center"。
　　　　center--居中。
　　　　position方位：是从 x 轴半轴 y 负半轴 的方位。
　　　　left/top/right/bottom--左上右下。

　　当图片小于盒子时，图片位置默认在左上角。

 

2.背景设置

　　①元素背景属性：
　　　　background 简写属性，作用是将背景属性设置在一个声明中
　　　　background-image：url---设置背景
　　　　background-position：设置图片起始位置（top、bottom、left、right组合使用）
　　　　background-repeat：设置图片是否重复（no-repeat：不重复）
　　② CSS新增
　　　　background-size：设置背景图大小
　　　　background-cover：扩展图片(不留白)
　　　　background-contain：背景扩展至最大（可能留白）

都在代码里，直接展示。

代码：

/* 盒子1 */
.box1{
    /* 设置一个550*700大小的盒子 */
    width: 550px;
    height: 700px;
    /* ridge--3D垄状边框 */
    border: 10px ridge brown;
    float: left;
    margin-left: 180px;
    /* 将两个背景图片链接放在一个盒子里 */
    /* no-repeat--设置背景图不重复
    right bottom--将图片置于右下角
    left top--将图片置于左上角 */
    background: url(http://img.duoziwang.com/uploads/1512/1-1512232234340-L.jpg) no-repeat left top,
                url(https://img1.baidu.com/it/u=110908691,589273986&fm=253&fmt=auto?w=200&h=200) no-repeat right bottom;
}


.xiantiao{
    margin-left: 20px;
    width: 500px;
    height: 20px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    position: relative;
    z-index: -1; /* 设置优先级 */
}


/* 盒子2 */
.box2{
    width: 550px;
    height: 700px;
    /* ridge--3D垄状边框 */
    border: 10px ridge brown;
    float: left;
    background-color: tan;
    position: relative;

}
.box2 .tu1{
    width: 200px;
    height: 200px;
    /* repeat：no-repeat--设置背景图不重复 */
    background-repeat: no-repeat;
    background-image: url(https://img1.baidu.com/it/u=110908691,589273986&fm=253&fmt=auto?w=200&h=200);
    position: absolute;
    left: 350px;
    bottom: 0px;
}
.tu2{
    width: 190px;
    height: 190px;
    /* repeat：no-repeat--设置背景图不重复 */
    background-repeat: no-repeat;
    background-image: url(http://img.duoziwang.com/uploads/1512/1-1512232234340-L.jpg);
    position: absolute;
    left: 0px;
    top: 0px;
}
.xiantiao1{
    margin-left: 20px;
    width: 500px;
    height: 20px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

 

 

视图：

　　

 

..图片百度，侵权劝删