CSS中背景图片的属性：background-repeat、background-position、background-size

来源：互联网发布：神硕微营销软件怎么样编辑：程序博客网时间：2024/04/18 10:42

背景图片的各种属性：

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

2、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; 图片显示在上中间

3、background-size：背景图片的大小

background-size: 100% 100%; 背景图片的大小

background-size: contain; contain：图片宽高等比例缩放，直到宽或高填满父布局，有可能出现布局填充不完整。

background-size: cover; cover：图片宽高等比例缩放，直到较小的宽或高填满父布局，可能出现图片溢出。

代码示例：

<!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>

代码运行结果：

阅读全文

0 0