背景样式

最新推荐文章于 2022-08-13 14:37:07 发布

黄色的海绵宝宝

最新推荐文章于 2022-08-13 14:37:07 发布

阅读量51

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/m0_70552412/article/details/125981728

版权

  <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        /* 需求1:添加背景色 */
		background-color: red;
        /* 需求2:添加背景图片 ./  ../ */
		background-image: url(./img/小图.webp);
        /* 需求3:虽然图小，但图片我只要一张*/
		background-repeat: no-repeat;
        /* 需求4:调整背景图片在元素中的位置 */
		background-position:-30px -30px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>

1: background-color 设置背景颜色
2:background-image来设置背景图片
   - 语法：background-image:url(相对路径);
   -可以同时为一个元素指定背景颜色和背景图片，
       这样背景颜色将会作为背景图片的底色
   -图片在元素中的位置
       如果背景图片大于元素，默认会显示图片的左上角
       如果背景图片和元素一样大，则会将背景图片全部显示
       如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
3:background-repeat用于设置背景图片的重复方式
可选值：
   repeat，默认值，背景图片会双方向重复（平铺）
   no-repeat ，背景图片不会重复，有多大就显示多大
   repeat-x，背景图片沿水平方向重复
   repeat-y，背景图片沿垂直方向重复
4:background-position可以调整背景图片在元素中的位置
   背景图片默认是贴着元素的左上角显示
可选值：
   该属性可以使用 top right left bottom center中的两个值
       来指定一个背景图片的位置
       top left 左上
       bottom right 右下
       如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，
       第一个值是水平偏移量
           - 如果指定的是一个正值，则图片会向右移动指定的像素
           - 如果指定的是一个负值，则图片会向左移动指定的像素
       第二个是垂直偏移量
           - 如果指定的是一个正值，则图片会向下移动指定的像素
           - 如果指定的是一个负值，则图片会向上移动指定的像素

黄色的海绵宝宝

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景样式

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素。-如果指定的是一个正值，则图片会向右移动指定的像素。-如果指定的是一个负值，则图片会向左移动指定的像素。-如果指定的是一个正值，则图片会向下移动指定的像素。-如果指定的是一个负值，则图片会向上移动指定的像素。如果背景图片和元素一样大，则会将背景图片全部显示。no-repeat，背景图片不会重复，有多大就显示多大。如果背景图片大于元素，默认会显示图片的左上角。-可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。...
复制链接

扫一扫