背景图片的相关设置

最新推荐文章于 2024-06-16 20:55:56 发布

短暂又灿烂的

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量336

点赞数 2

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42232156/article/details/121626411

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

通过设置背景图片的不同属性进行设置背景

 background-image 设置背景图片
 -可以设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
 -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
 -如果背景的图片大于元素，则会一部分背景无法完全显示
 -如果背景图片和元素一样大，则会直接正常显示

 background-repeat: 设置背景的重复方式
可选值： repeat 默认值、 xy双方向重复 铺满
 repeat-x 沿着x方向
repeat-y 沿着y方向
no-repeat 背景图片不重复  有多大就是多大

<style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: orchid;
            background-image: url(../img/bg.png);
            background-repeat: repeat;
        }
    </style>

background-position:  设置背景图片的位置

设置方式：

通过 top left right bottom center 几个表示方位的词来设置背景图片的位置

需要指定2个如果只写一个则默认第二个为center

通过偏移量来指定背景图片的位置：
水平方向偏移量 垂直方向偏移量

<style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: orchid;
            background-image: url(../img/bg.png);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

设置背景的范围

background-clip: 
可选值：
 border-box 默认值,背景会出现在边框的下边
 padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box  背景只会出现在内容区

background-origin 背景图片的偏移量计算的原点
 padding-box 默认值background-position从内边距处开始计算
 content-box 背景图片的偏移量从内容区处计算
 border-box  背景图片的偏移量从边框处开始计算

background-size:  设置背景图片大小
第一个表示宽度
 第二个表示高度
如果只写一个则第二个 默认就是auto  自动等比例缩放

cover  图片比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示

.box1{
            width: 500px;
            height: 500px;
            background-color: orchid;
            background-image: url(../img/4.jpg);
            background-repeat: no-repeat;
           background-size: contain;
        }

<style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: orchid;
            background-image: url(../img/4.jpg);
            background-repeat: no-repeat;
           background-size: cover;
        }
    </style>

background-attachment: 背景图片是否跟随元素移动

可选值：

scroll 默认值背景图片会跟随元素移动

fixed 背景图片会跟随元素移动

.box1{
            width: 300px;
            height:300px;
            overflow: auto;
            background-color: #bfa;
            background-image: url(../img/1.jpg);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-origin: content-box;
            background-clip:content-box ;
            border: 10px red double;
            background-size: contain;
        }

.box2{
            width: 200px;
            height: 1000px;
            /* background-color: orange; */
            background-image: url(../img/bg.png);
            background-repeat: no-repeat;
            background-position:100px 100px ;

            background-attachment:fixed ;
        }

<div class="box1">
        <div class="box2">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto placeat deserunt eaque, eum quisquam deleniti, earum blanditiis eligendi amet possimus quos obcaecati velit dicta mollitia dignissimos accusamus ea nostrum.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsa itaque consequatur modi perspiciatis laboriosam ipsum nemo cupiditate laborum consectetur, sit officia autem ullam magnam ad natus illum, nulla omnis?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui nostrum quidem repellat et, voluptate quia eius tenetur voluptatem quo est, commodi molestias, adipisci incidunt. Adipisci harum accusantium hic quis ad.
        </div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height:300px;
            overflow: auto;
            background-color: #bfa;
            background-image: url(../img/1.jpg);
            /*
            background-image 设置背景图片
              -可以设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
              -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
              -如果背景的图片大于元素，则会一部分背景无法完全显示
              -如果背景图片和元素一样大，则会直接正常显示
             */
             /* background-repeat: 设置背景的重复方式
               可选值： repeat 默认值、 xy双方向重复 铺满
                       repeat-x 沿着x方向
                       repeat-y 沿着y方向
                       no-repeat 背景图片不重复  有多大就是多大 */
                       background-repeat: no-repeat;
            /* background-position:  设置背景图片的位置
               设置方式： 定2个 如果只写一个 则默认第二个为center

                通过偏移量来指定背景图片的位置：
                水平方向偏移量 垂直方向偏移量
            */
            /* background-position: center ; */
            background-position: 0 0;
            /* 设置背景的范围
            background-clip:
                   可选值：
                   border-box 默认值,背景会出现在边框的下边
                   padding-box 背景不会出现在边框，只出现在内容区和内边距
                   content-box  背景只会出现在内容区

            background-origin 背景图片的偏移量计算的原点
                   padding-box 默认值 background-position从内边距处开始计算
                   content-box 背景图片的偏移量从内容区处计算
                   border-box  背景图片的偏移量从边框处开始计算
            */

            background-origin: content-box;
            background-clip:content-box ;
            border: 10px red double;

/* background-size:  设置背景图片大小
       第一个表示宽度
       第二个表示高度
          -如果只写一个则第二个 默认就是auto  自动等比例缩放

          cover  图片比例不变，将元素铺满
          contain 图片比例不变，将图片在元素中完整显示
*/
background-size: contain;
        }
        .box2{
            width: 200px;
            height: 1000px;
            /* background-color: orange; */
            background-image: url(../img/bg.png);
            background-repeat: no-repeat;
            background-position:100px 100px ;
            /* background-attachment:  背景图片是否跟随元素移动
                      可选值：
                      scroll 默认值 背景图片会跟随元素移动
                      fixed 背景图片会跟随元素移动
            */
            background-attachment:fixed ;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto placeat deserunt eaque, eum quisquam deleniti, earum blanditiis eligendi amet possimus quos obcaecati velit dicta mollitia dignissimos accusamus ea nostrum.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsa itaque consequatur modi perspiciatis laboriosam ipsum nemo cupiditate laborum consectetur, sit officia autem ullam magnam ad natus illum, nulla omnis?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui nostrum quidem repellat et, voluptate quia eius tenetur voluptatem quo est, commodi molestias, adipisci incidunt. Adipisci harum accusantium hic quis ad.
        </div>
    </div>

</body>
</html>