如何使用 CSS 创建透明或模糊的卡片?
在本文中,我们将使用基本的 HTML 和 CSS 属性创建一个透明或模糊的卡片。模糊效果也称为玻璃效果。
进场:
- Mark on to create the layout of the card.
- Define the class of each component to use CSS properties.
- To apply a glass or blur effect, use the background filter property to blur the card.
示例:使用上述方法创建玻璃或模糊或透明卡片。如第一步所述,我们将在 body 标签下创建卡片的布局。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="background">
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="image" />
<h1>GeeksforGeeks</h1>
<h3>Happy Coding</h3>
</div>
</div>
</body>
</html>
版权属于:月萌API www.moonapi.com,转载请注明出处