前端必知：25.设置背景/以及背景蒙版（09进阶）

最新推荐文章于 2024-08-03 20:32:29 发布

小姚学前端

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量875

点赞数 4

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131882782

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一设置背景（进阶）

background-origin:设置背景图渲染的起始位置

background-size 设置背景图片的填充方式，也就是设置背景图大小

一设置背景（进阶）

background-origin:设置背景图渲染的起始位置

值

padding-box 默认值，从padding位置开始渲染

content-box 从内容部分开始渲染

border-bor 从border开始渲染

background-size 设置背景图片的填充方式，也就是设置背景图大小

值： cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片

contain 以长边为基础渲染图片，短边按比例缩放

值还可以是以下写法

background-size ：宽度高度；

如果只写一个宽度，高度按照比例渲染

宽度和高度可以是具体的数字，也可以是相对于所在元素的百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置背景</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 10px #f00 solid;
            background:url(../img/icon_xls.gif) no-repeat;
            padding: 20px;
            background-origin:border-box ;
        }
        .wp2 , .wp3 , .wp4 , .wp5{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            background: url(../img/wallhaven-m32r8k_7725x5004.png) no-repeat;
            margin: 10px 0;
            background-size:100%;
        }
        .wp3{
            background-size:contain;
        }
        .wp4{
            background-size: 80% 30%;
        }
        .wp5{
            background-size: 100px 80px;
        }
    </style>
</head>
<body>
    <!-- 
          background-origin:设置背景图渲染的起始位置
          值 
             padding-box 默认值，从padding位置开始渲染
             content-box 从内容部分开始渲染
             border-bor 从border开始渲染
        
          background-size 设置背景图片的填充方式，也就是设置背景图大小
               值： cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片
                    contain 以长边为基础渲染图片，短边按比例缩放
                值还可以是以下写法
                 background-size ：宽度 高度；
                 如果只写一个宽度，高度按照比例渲染
                 宽度和高度可以是具体的数字，也可以是相对于所在元素的百分比
          
     -->
    <div class="wp"></div>
    <div class="wp2"></div>
    <div class="wp3"></div>
    <div class="wp4"></div>
    <div class="wp5"></div>
</body>
</html>

二背景蒙版

背景蒙版

1.最初只有谷歌浏览器支持

2.背景蒙版可以把透明图的透明部分转化为不透明，把不透明的部分渲染为透明

3.他的设置方式和背景图设置一致

浏览器前缀

-webkit- 是谷歌，苹果等浏览器内核的前缀

-moz- 是火狐浏览器内核的前缀

-ms- 是ie 浏览器内核的前缀

-o- 欧朋浏览器内核的前缀

在css属性名之前设置添加浏览器前缀，表示该css属性是浏览器的私有属性（只有在当前浏览器下才能访问对应css样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景蒙版</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 300px;
            height: 300px;
            border: 1px #f00 solid;
            background: #04be02;
            -webkit-mask:url(../img/logo.png) no-repeat center center;
            -webkit-mask-size: 100% 100%;
        }
    </style>
</head>

    <div class="wp"></div>
</body>
</html>

三总结

设置背景和背景蒙版是前端开发中常用的技巧，可以为网页和应用程序添加丰富的视觉效果。下面我将对设置背景和背景蒙版进行总结认识和看法：

设置背景：
在前端开发中，我们可以使用CSS的background属性来设置元素的背景。可以为背景指定颜色、图像、渐变等。通过设置背景，我们可以为网页元素提供更加丰富的外观和视觉效果。

使用背景图像或渐变可以给元素增添视觉上的层次感和吸引力。背景图像可以用来添加纹理、图案或者完整的背景图片，使页面更加生动。渐变可以创建平滑过渡的色彩效果，为背景增添深度和动态感。

设置背景蒙版：
背景蒙版是一种叠加在背景上的半透明遮罩层，可以通过CSS属性和伪类来实现。背景蒙版可以用来调整背景的颜色、透明度或者添加纹理效果，从而为元素或整个页面增添一种特殊的氛围或效果。

通过设置背景蒙版，我们可以实现各种特效，比如模糊、灰度、深色遮罩等。这些效果可以为网页和应用程序创建独特的风格和视觉效果。背景蒙版也可以用来创建遮罩层，在特定区域上方添加透明度来突出显示内容。

总的来说，设置背景和背景蒙版是前端开发中常用的技巧，可以为网页和应用程序增加视觉上的吸引力和个性化。通过灵活地运用背景图片、渐变、背景蒙版等属性和效果，我们可以创造出独特且令人印象深刻的用户界面。然而，需要注意在使用背景蒙版时要注意平衡透明度和可读性，确保内容仍然易于阅读和使用。

小姚学前端

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：25.设置背景/以及背景蒙版（09进阶）

设置背景和背景蒙版是前端开发中常用的技巧，可以为网页和应用程序增加视觉上的吸引力和个性化。通过灵活地运用背景图片、渐变、背景蒙版等属性和效果，我们可以创造出独特且令人印象深刻的用户界面。然而，需要注意在使用背景蒙版时要注意平衡透明度和可读性，确保内容仍然易于阅读和使用。
复制链接

扫一扫