CSS Glassmorphism的直观指南

最新推荐文章于 2024-06-29 16:08:06 发布
最新推荐文章于 2024-06-29 16:08:06 发布
阅读量92 收藏
点赞数
分类专栏： 前端 文章标签： css 前端 Glassmorphism
原文链接：https://www.codeproject.com/Articles/5363679/An-Intuitive-Guide-to-CSS-Glassmorphism
版权

目录

介绍

什么是Glassmorphism？

Glassmorphism的历史

CSS Glassmorphism的特征

使用CSS创建Glassmorphism

CSS Glassmorphism与库存背景图像

具有简单渐变的CSS Glassmorphism

实现最佳CSS Glassmorphism的技巧

结束语

介绍

Glassmorphism是网页设计趋势的最新成员，在社区中越来越受欢迎。即使您没有听说过它，您也有可能遇到过它并在某个地方使用它。

使用Glassmorphism可以帮助创造令人惊叹的数字体验。结合丰富多彩的图像和形状，透明度和模糊的背景使Glassmorphism更加引人注目。在设计中添加霜冻和半透明元素可以增加深度和维度，使用户体验更加身临其境和引人入胜。像苹果，Microsoft这样的顶级科技巨头在其产品中使用Glassmorphism。

如果您使用的是iPhone或iPad，请转到主屏幕或打开通知面板，或者如果您使用的是Windows计算机，请转到“开始”菜单。您是否注意到菜单和小部件周围的磨砂玻璃效果？这就是Glassmorphism！

Apple产品中iOS上的Glassmorphism示例。

原始图

Microsoft产品中Windows 11上的Glassmorphism示例。

Glassmorphism是一种UI设计风格，它使用透明度和背景模糊在UI中实现类似玻璃的效果。通过将UI元素放置在高度生动的背景上，可以进一步增强这种玻璃效果。这种效应通常被称为“磨砂玻璃效应”。

Glassmorphism设计风格在2021年底开始流行，当时Michal Malewicz（他也引入了Neumorphism UI设计风格）写了一篇文章，将所有磨砂玻璃效果风格组合在一个名称下——“Glassmorphism”。

在这本关于CSS Glassmorphism的指南中，我们将了解Glassmorphism，它背后的一些历史，以及我们如何使用CSS实现效果。

什么是Glassmorphism？

Glassmorphism UI包含具有磨砂玻璃效果的卡片，可自由漂浮在色彩鲜艳、生动的背景上。这种设计风格的主要亮点是在层的帮助下实现的磨砂玻璃纹理和深度。

Glassmorphism效果使设计师能够使用玻璃效果组合图层，同时仍然保持不同主体之间的明显分离。这种设计风格在仪表板、智能手机UI和移动应用程序中很常见。Apple和Microsoft等流行品牌已经在他们的设计系统中使用它。

让我们看看Microsoft和Apple如何在他们的Windows 11中使用Glassmorphism。

通过GIPHY

Microsoft Windows 11中使用磨砂玻璃效果。您可以在“开始”菜单、任务栏、“设置”菜单、“通知”框和某些Microsoft应用程序中注意到模糊效果。Microsoft将这种模糊效果包含在其流畅的设计系统中，名为“亚克力”。

Acrylic是一个流畅的设计系统组件，它使用模糊效果为您的应用设计添加物理纹理和深度。Microsoft在其Windows 11用户界面和一些Microsoft应用程序中使用了这种亚克力效果。

就Apple、iOS和macOS而言，一直在其UI中使用玻璃效果。看看macOS Big Sur上的这个控制中心。玻璃效果在控件的设计中清晰可见。您可以在应用程序抽屉、通知、小部件等中注意到类似的玻璃效果。

此外，这种玻璃效果也在iOS中实现。看看iPhone锁屏上的这种通知设计。这种设计看起来美观且易于用户交互。

Glassmorphism在操作系统UI和Android/iOS应用程序中很常见。但最近，随着CSS中对backdrop-filter属性的支持增加，许多网站正在转向CSS Glassmorphism设计。

以下是一些使用CSS Glassmorphism的热门网站。

1. 设计+代码

2. 亚马逊音乐

在这里，我使用了LT Browser 2.0——这是一个基于Chromium的移动友好测试器。使用LT浏览器2.0，您可以在超过50+个设备视口上测试您网站的响应能力。它支持在移动设备、平板电脑、台式机甚至笔记本电脑上进行响应式测试。

CSS Glassmorphism设计的主要优势是模糊、透明度、背景和边框的平衡。

Glassmorphism的历史

令人惊讶的是，UI设计中的Glassmorphism设计趋势并不新鲜。它于2013年首次出现在iOS 7和Windows Vista上。还记得透明的Windows菜单吗？是的，那是Glassmorphism的第一个实例。

在那些日子里，存在很多可访问性和可读性问题，因此在下一次更新中慢慢删除了它。近八年后，在2021年，Apple推出了适用于macOS的Big Sur更新，重新引入了Glassmorhphism。同年，Microsoft还在Windows 11更新中提出了Glassmorphism设计。

从那时起，它重新流行起来，让每个设计师都在谈论它。它成为最受欢迎的现代网页设计趋势之一，因此许多产品开始将其纳入其设计系统。

以下是Dribbble上一些流行的CSS Glassmorphism设计。

  • Mikołaj Gałęziowski重新设计的Creative Cloud应用程序

  • 侧边栏菜单设计：Anton Olashyn

  • Mikołaj Gałęziowski的Messenger应用程序

  • Azie Melasari开发的加密货币网站

CSS Glassmorphism的特征

在本节中，我们将探讨CSS Glassmorphism的特征。

  • 半透明

半透明或背景模糊是CSS Glassmorphism的基本方面属性。这种效果使卡片的背景部分可见，这有助于卡片完美地融合在一起。

半透明是通过两种效果实现的——不透明度和背景模糊。半透明度应较低，以使对象上的文本可读。

  • 生动的背景

Glassmorphism的背景起着至关重要的作用。选择一个微妙的背景，不要太吵而不能引起注意，或者不要太沉闷而不能被忽视。通常，首选渐变或具有几何形状的设计。您还可以在库存图片上尝试Glassmorphism设计。

  • 使用阴影和光照边框的层次结构

层次结构或分层在UI中建立深度感。您可以使用阴影创建层次结构来描绘浮动效果。带有闪亮边缘的边框也用于为对象提供类似玻璃的效果。颜色、阴影和边框取决于对象的背景颜色。

当以正确的比例组合时，上述效果会产生美丽且具有视觉吸引力的Glassmorphism效果，可以使任何用户立即成为粉丝。

现在我们知道了Glassmorphism的特征，让我们看看如何使用CSS创建这种效果。

使用CSS创建Glassmorphism

使用CSS创建Glassmorphism非常容易。Glassmorphism背后的主要思想是在彩色背景上创建玻璃面板。这种玻璃效果是使用CSS Opacity和backdrop-filter属性实现的。

以下是实现CSS Glassmorphism的步骤：

  1. 为根元素添加生动的背景。
  2. 对焦点对象应用不透明度。
  3. 使用backdrop-filter属性添加背景模糊。
  4. 添加浅色边框和border-radius。
  5. 使用 CSS Box Shadow 属性应用阴影。

使用上述步骤，让我们创建如下所示的简单信用卡效果。

我们将首先使用HTML和CSS创建整个结构，然后转到Glassmorphism效果。

[HTML全文]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" 
          rel="stylesheet">
</head>

<body>
    <section>
        <div class="circle-1"></div>
        <div class="circle-2"></div>
        <div class="circle-3"></div>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
                <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #0f0c29; 
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); 
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); 
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.circle-1 {
    position: absolute;
    top: 15%;
    left: 30%;
    background: #4776E6;
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
    background: linear-gradient(to right, #8E54E9, #4776E6);   
    height: 350px;
    width: 350px;
    border-radius: 50%;
}
.circle-2{
    position: absolute;
    bottom: 5%;
    right: 35%;
    background: #bc4e9c;
    background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);
    background: linear-gradient(to right, #f80759, #bc4e9c);
    height: 400px;
    width: 400px;
    border-radius: 50%;
}
.circle-3 {
    position: absolute;
    top: 30%;
    right: 35%;
    background-color: #FF3CAC;
    background: #ff9966;
    background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
    background: linear-gradient(to right, #ff5e62, #ff9966);
    height: 150px;
    width: 150px;
    border-radius: 50%;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255,255,255);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
}
.card > i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card > div > p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}

.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}

.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

我使用了深色渐变背景，并在此基础上添加了一些彩色圆圈以增加深度。我使用了CSS中的position: absolute属性来定位对象。我把物体放在卡片的正后方，这样当我们添加磨砂玻璃效果时，这些彩色物体就会部分可见。我使用了一个叫WebGradients的用于生成渐变背景颜色的在线工具。

为了设计卡片的样式，我使用CSS Flexbox将卡片完美地对齐在中心，并为顶部显示的VISA图标使用混音图标。目前，我已经为卡片添加了黑色背景，但我们将在后续步骤中对其进行更改。

关于根部分的背景，您可以使用任何原色柔和色或网格渐变背景。选择适合您项目要求并与磨砂玻璃效果相得益彰的产品。

CSS中的模糊效果是使用backdrop-filter属性实现的。此属性用于应用图形效果，例如模糊、颜色偏移或反转背景。

在我们的例子中，backdrop-filter: blur(40px)对元素的背景应用模糊。让我们将此属性添加到.card元素中。

CSS

.card {
    /* other styles */
    backdrop-filter: blur(40px);
    /* fallback cross browser compatibility */
    -webkit-backdrop-filter: blur(40px);

}

输出

如您所见，该卡没有变化。这是因为卡仍然需要透明。该backdrop-filter属性与不透明度相结合，以提供部分透明效果。让我们降低卡片的不透明度。

若要降低不透明度，可以单独使用该opacity属性或该background属性的rgba()输入类型。

CSS

.card {
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
    /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
}

输出

你有它，一个只使用CSS的Glass卡。我们还没有完成。我们没有为卡片添加边框和阴影。边框和阴影将在卡片和背景对象之间创建清晰的区别。让我们添加它们。

CSS

.card {
    border-radius: 20px;
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
     /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}

输出

任务完成！这就是我们仅使用CSS的Glassmorphism效果。您还可以为背景元素添加一些动画以增强效果。我使用关键帧来移动对象。

CSS

.circle-1{
        animation: bounce 4s linear infinite;
}
.circle-2{
    animation: bounce 4s linear infinite 1s;
}
.circle-3 {
    animation: bounce 4s linear infinite 2s;
}
@keyframes bounce {


    0% {
        transform: translateY(0px);
    }


    25% {
        transform: translateY(10px);
    }


    50% {
        transform: translateY(0px);
    }


    75% {
        transform: translateY(-10px);
    }


    100% {
        transform: translateY(0px);
    }

}

输出

代码笔

https://codepen.io/anurag-gharat/embed/mdjBPqm?default-tab=html

您可以使用不同的背景制作CSS Glassmorphism效果的许多变体。

以下是我们信用卡项目的一些变体。

CSS Glassmorphism与库存背景图像

[HTML全文]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
             rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}
.card>p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}
.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

代码笔

https://codepen.io/anurag-gharat/embed/oNMGxQY?default-tab=html

具有简单渐变的CSS Glassmorphism

[HTML全文]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
             rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">

            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>

            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    font-family: 'Noto Sans', sans-serif;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #396afc;
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);
    background: linear-gradient(to right, #2948ff, #396afc);
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}

.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}

.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

代码笔

https://codepen.io/anurag-gharat/embed/OJwxNav?default-tab=html

实现最佳CSS Glassmorphism的技巧

在上一节中;我们讨论了如何使用CSS创建Glassmorphism。现在，让我们看一些技巧，这些技巧将帮助您在设计中有效地实现Glassmorphism。

  • 使用生动的背景，与玻璃效果完美融合。您可以使用CSS渐变、网格渐变、几何设计、3D对象和库存图像。
  • 添加一些用户动画和交互，如悬停效果，使UI变得有趣。
  • 为了增加设计的深度，您可以添加浮动资源，如圆形或任何形状的对象。
  • 不要忘记卡片的边框和阴影。
  • 请勿将此效果应用于用户交互元素，如按钮、切换开关和输入。
  • 不要过度使用Glassmorphism。

结束语

Glassmorphism设计使您的UI更加现代和简约。我觉得这种新的UI风格会一直存在，许多产品都会将其融入到他们的设计风格中。

就是这样！我希望你在CSS Glassmorphism上找到这个指南。在本指南中，我们了解了Glassmorphism并了解了它的历史和主要特征。后来，我们使用CSS创建了信用卡的Glassmorphism设计，并看到了一些变化。

如果您喜欢新的CSS Glassmorphism趋势，请尝试使用它创建一些很酷的项目并在评论中分享它们。

https://www.codeproject.com/Articles/5363679/An-Intuitive-Guide-to-CSS-Glassmorphism

寒冰屋
关注
专栏目录
CSS构建亚克力和磨砂玻璃效果
阿尔法星球的专栏
09-21 852
亚克力效果，又称为毛玻璃效果（Glassmorphism），是一种流行的UI设计趋势，特点是半透明的背景，以及模糊和阴影效果。磨砂玻璃效果是一种视觉效果，通过在元素上应用半透明和模糊效果，使得背景内容隐约可见。
CSS:The Definitive Guide, 4th Edition[CSS权威指南]（英文版）
03-04
《CSS权威指南》第四版是CSS领域的重要著作，作者Eric A. Meyer凭借其深厚的行业经验和智慧，对CSS的各个方面进行了详尽的探讨。 本书从基础讲起，逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...
display:flex布局，自动适应屏幕高度100%
热门推荐
web前端开发大全
02-28 2万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &l
毛玻璃效果(CSS)实现
miao-miao-zi
09-14 2722
毛玻璃效果
使用 CSS 实现毛玻璃效果
编码行者的博客
03-19 9336
在现代 Web 设计中,毛玻璃效果越来越受欢迎。它能够让界面元素看起来更加柔和、朦胧,同时又不会完全遮挡背景内容,给人一种透明而又不失质感的视觉体验。虽然过去实现这种效果需要借助图像编辑软件,但现在只需要几行 CSS 代码,就可以在网页上呈现出令人惊艳的毛玻璃效果。
css实现毛玻璃效果
m0_56104994的博客
03-13 539
不适用backdrop-filter如何实现毛玻璃效果
Glassmorphism-Portfolio：基于@developedbyed教程HTML＆CSS构建的Glassmorphism产品组合网站
02-12
Glassmorphism-Portfolio 这是一个基于@developedbyed的静态HTML / CSS Glassmorphism产品组合。 截图示例： 现场。 您也可以通过UX Collective查看Michal Malewicz中有关这篇有趣的中篇文章。
glassmorphism-css
04-04
【标题】Glassmorphism CSS：探索透明美学与前端设计新潮流 在当今的网页设计领域，创新和独特性是设计师们不断追求的目标。"Glassmorphism"，又称磨砂玻璃效果，正是一种引领新趋势的设计风格，它在Dribbble和...
图解css图解css
05-15
图解css图解css，不好包退，
CSS实现毛玻璃效果
No_Name_Cao_Ni_Mei的博客
07-07 122
【代码】CSS实现毛玻璃效果。
glass-login:这是一个 Glassmorphism 登录表单
05-30
玻璃登录 这是一个 Glassmorphism 登录表单
css 实习毛玻璃效果
最新发布
qq_33240556的博客
06-29 834
在CSS中实现毛玻璃效果，主要可以使用属性或filter属性结合一些布局技巧。
css实现一个毛玻璃效果
qq_44577699的博客
09-14 1133
通过CSS和H5实现一个简单的毛玻璃效果
CSS - 元素背景模糊
thingir的博客
11-18 647
一、backdrop-filter 用法 backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 backdrop-filter: none; /* 指向 SVG 滤镜的 URL */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> 滤镜函数值 */ backdrop-fil
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
weixin_33355290的博客
08-04 970
写样式，毕竟每个雨滴都长得不一致嘛。使用预处理器除了可以帮助我们减少工作量之外，还可以使用预处理器中的循环、变量等。最主要的是可以使用随机函数产生的随机值，让我们不需要单独处理上百个雨滴。有关于HAML和Sass的语法可以各自到其官网上查阅。如果你自己本地电脑不具备这样的开发环境，可以直接在Codepen创建DEMO，并且选择对应的预处理器。在HTML和CSS的配置中选择对应的预处理器。比如在HT...
HTML5+CSS3+JS小实例：逼真的玻璃卡片悬停效果
我们好像在哪见过 私
01-23 782
逼真的玻璃卡片悬停效果
css实现模糊效果和毛玻璃效果
qq_38698753的博客
09-02 305
<img class="blur" src="http://zxpic.imtt.qq.com/zxpic_imtt/2019/09/02/1010/originalimage/101922_2473783333_1_700_435.jpg" /> .blur { width: 100px; filter: url(blur.svg#blur); /* FireFox, Chro...
纯CSS教你实现磨砂玻璃背景效果（附代码），蚂蚁金服技术面
2401_83621918的博客
04-11 1142
padding: 0;3.添加背景图片========我们需要我们的背景占据页面的整个宽度和高度，并且我们不想重复我们的背景，我们也希望我们的背景是固定的。我们希望背景是固定的，因为我们不希望以后在继承背景时将整个背景显示在div中。body{4.现在给Div一些样式现在，我们将使用背景继承为div设置一些宽度和高度。我们还需要确定绝对位置，以确保叠加层不会占用网页的整个宽度和高度div{5，固定和不固定附件的示例。
Vue 组件间的通信(1)
2401_84436058的博客
04-29 591
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
CSS开发基础与应用指南
"CSS开发指南.doc 是一份详细阐述CSS相关知识的学习材料，旨在帮助开发者掌握CSS基础知识并进行前端开发。这份文档不断更新以保持最新，由哈坤·利和伯特·波斯等人共同设计，引入了层叠的创新概念，使得作者和读者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值