CSS背景相关知识扩充

最新推荐文章于 2024-03-07 16:48:22 发布

JamesMoriartyZ

最新推荐文章于 2024-03-07 16:48:22 发布

阅读量100

点赞数

分类专栏： HTML CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/XzXz0207/article/details/128119357

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

一、背景相关知识扩充

<!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;
        /* 需求一: 添加背景色 */
        /* background-color */
        background-color: red;
        /* 需求二: 添加背景图 */
        /* 
            background-image: url() 
            url指向图片引入的路径 
            如果引入的图片小于盒子, 图片默认铺满
            如果引入的图片大于盒子, 图片默认显示左上角的位置
        */
        background-image: url(../homework1118/images/2.jpg);
        /* 需求三: 虽然图小, 但是只要一张 */
        /* 
            background-repeat
            设置背景图是否铺满
                可选值
                    repeat 铺满
                    no-repeat 不铺满, 留一张
                    repeat-x 水平方向铺满
                    repeat-y 垂直方向平铺
        */
        background-repeat: no-repeat;
        /* 需求四: 调整背景图在元素中的位置 */
        /* 
            background-position
            调整背景图位置
                参数: 
                    参数1 水平方向位置
                    参数2 垂直方向位置
                left right top bottom center 通过这几个方位词调整图片位置
                    参数2如果不写 默认center
                写法2: 直接写大小
        */
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .box1 {
        height: 500px;
        width: 500px;
        padding: 20px;
        border: 10px red double;
        margin: 0 auto;
        /*设置一个背景颜色*/
        background-color: #bfa;
        background-clip: content-box;
        /* 引入背景图 */
        background-image: url(../homework1130/images/3.gif);
        /* 设置图片不重复 */
        background-repeat: no-repeat;
        /* 设置图片的位置 */
        background-position: 100px 50px;
        /* 设置图片偏移的原点 */
        background-origin: border-box;
      }
      .box2 {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 235, 205, 0.6);
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <!-- <div class="box2"></div> -->
    </div>
  </body>
</html>
<!-- 
5:background-clip 设置背景色的范围
      可选值：
          border-box 默认值，背景颜色会出现在边框的下边
          padding-box  背景不会出现在边框，只会出现在内容区和内边距
          content-box  背景只出现在内容区

6:background-origin 
    设置背景图片的偏移量计算的原点,配合偏移量使用的
      padding-box  从内部距处开始计算   默认值
      content-box  背景图片的偏移量从内容区处计算
      border-box   从边框开始计算偏移量
 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        width: 500px;
        border: 1px solid red;
        margin: 50px auto;
        /* 引入背景图 */
        /* background-image: url(./img/小图.webp); */
        background-image: url(../homework1130/images/3.gif);
        /* 背景图不重复 */
        background-repeat: no-repeat;
        /* 设置背景图的大小 */
        /* background-size: 300px auto; */
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>
<!-- 
7:background-size 设置背景图片的大小
  参数：
    第一个值：宽度
    第二个值：高度
        如果只写一个，第二值，默认为auto
        
    cover  图片的比例不变，将元素铺满 (比较常用)
    contain 图片比例不变，将图片完整显示
 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        height: 300px;
        width: 300px;
        /*设置一个背景颜色*/
        /* background-color: red; */
        /*设置一个背景图片*/
        /* background-image: url(./img/小图.webp); */
        /*设置背景不重复*/
        /* background-repeat: no-repeat; */
        /*设置背景图片的位置*/
        /* background-position: center; */
        /* 设置图片大小 */
        /* background-size: 150px; */
        /* 设置图片偏移的原点 */
        /* background-origin: border-box; */
        /*  设置背景色的范围 */
        /* background-clip: padding-box; */

        /*
				  background
				  	- 通过该属性可以同时设置所有背景相关的样式,
                  样式值之间用空格隔开即可
				  	- 没有顺序的要求，谁在前谁在后都行
				  		也没有数量的要求，不写的样式就使用默认值
				    -background-size要写在background-position后面
				 */
        background: #bfa url("./img/小图.webp") center/200px no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>