写一个html,要有毛玻璃的背景效果
时间: 2023-05-26 18:03:44 浏览: 44
<!DOCTYPE html>
<html>
<head>
<title>毛玻璃背景效果</title>
<style>
body {
background: url("https://picsum.photos/1920/1080") fixed;
background-size: cover;
filter: blur(10px);
-webkit-filter: blur(10px);
}
</style>
</head>
<body>
<h1>毛玻璃背景效果</h1>
<p>这是一个漂亮的毛玻璃背景效果。</p>
</body>
</html>
相关问题
html透明毛玻璃效果
要实现 HTML 的透明毛玻璃效果,可以使用 CSS3 中的 backdrop-filter 属性。该属性可以在元素的背景和内容之间添加一个半透明的层,从而实现毛玻璃效果。具体实现步骤如下:
1. 首先,需要设置元素的背景为半透明的颜色或者图片,例如:
```css
.container {
background: rgba(255, 255, 255, 0.5);
}
```
2. 然后,需要使用 backdrop-filter 属性来添加毛玻璃效果,例如:
```css
.container {
backdrop-filter: blur(10px);
}
```
这里的 blur(10px) 表示添加一个 10 像素的模糊效果,可以根据需要调整模糊程度。
完整的代码如下:
```html
<div class="container">
<p>这是一个透明毛玻璃效果的容器</p>
</div>
```
```css
.container {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
```
css背景图片毛玻璃效果代码
以下是一个CSS背景图片毛玻璃效果的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS背景图片毛玻璃效果</title>
<style>
/* 设置背景图片 */
body {
background: url(background-image.jpg) no-repeat fixed;
background-size: cover;
}
/* 设置毛玻璃效果 */
.blur {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
/* 使用多重背景实现模糊效果 */
background:
/* 底层背景图片 */
url(background-image.jpg) no-repeat center center fixed,
/* 上层背景图片,使用blur函数实现模糊效果 */
url(background-image.jpg) no-repeat center center fixed;
background-size: cover;
filter: blur(10px);
-webkit-filter: blur(10px);
/* 设置上层背景图片透明度,根据需求自行调整 */
opacity: .7;
}
</style>
</head>
<body>
<!-- 设置毛玻璃效果 -->
<div class="blur"></div>
<!-- 页面内容 -->
<h1>Hello, world!</h1>
</body>
</html>
```
该示例使用CSS3的多重背景和blur函数实现了一个背景图片的毛玻璃效果。页面内容直接插入到body元素中即可。注意,这只是一个示例,实际应用中应该根据需求进行调整。