背景图片属性

最新推荐文章于 2024-01-08 17:56:41 发布

ztt0918

最新推荐文章于 2024-01-08 17:56:41 发布

阅读量862

点赞数

分类专栏：背景图片属性文章标签：背景图片属性

本文链接：https://blog.csdn.net/ztt0918/article/details/70171260

版权

背景图片属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 300px;
            border: 1px solid fuchsia;
            /*背景颜色*/
            background-color: antiquewhite;
            /*背景图片*/
            background-image: url("../img/Lenovo.jpg");
            /*背景图片的展示方式
            no-repeat  repeat-x repeat-y */
            background-repeat:no-repeat;


            /*背景图片位置

       偏移量 (两个参数)水平方向的偏移，垂直方向的偏移

                  （一个参数px）水平方向的偏移，垂直方向居中

                    center 正居中

                   center top中上

                    right top右上

                    等等*/

            background-position:center top;


            /*背景图片的大小

         图片填充整个背景(有失真) 100% 100%

          contain 宽高等比例缩放，直到宽或高填满父布局，可能出现图片填充不完整（不一定填满整个背景)             cover：宽高等比例缩放，知道较小的宽或高填满父布局，可能出现图片溢出（一定填满整个背景) */

            background-size: cover;


background-size: contain；

        }

    </style>
    <title>背景图片属性</title>
</head>
<body>
      <div></div>
</body>
</html>

ztt0918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景图片属性

背景图片属性
复制链接

扫一扫

专栏目录