css花纹背景

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.patterns {
width: 200px;
height: 200px;
float: left;
margin: 10px;
box-shadow: 0 1px 8px #666;
}

.pt1 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.pt2 {
background-size: 50px 50px;
background-color: #f90;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt3{
background-size: 50px 50px;
background-color: red;
background-image: -webkit-linear-gradient(45deg ,rgba(255,255,255,.2) 50%,transparent 50%,transparent);
}
</style>

<body>
<div class="patterns pt1"></div>
<div class="patterns pt2"></div>
<div class="patterns pt3"></div>
<div class="patterns pt4"></div>
</body>

</html>

 

您可以点击查看:http://runjs.cn/detail/wbnuyq6p

转载于:https://www.cnblogs.com/wxhhts/p/8579419.html

### 使用 CSS 实现带背景花纹的毛玻璃(磨砂玻璃)效果 为了创建具有背景纹理的毛玻璃效果,可以组合使用 `backdrop-filter` 属性来处理背景模糊,并通过伪元素添加额外图层用于展示背景图案。 #### HTML 结构 ```html <div class="glass-effect"> <div class="pattern-layer"></div> <!-- 内容放置在此处 --> </div> ``` #### 基础样式设置 定义容器的基础布局属性以及引入外部资源作为背景图像: ```css .glass-effect { position: relative; padding: 2em; border-radius: 10px; overflow: hidden; } ``` #### 应用毛玻璃特效 利用 `backdrop-filter` 对整个 `.glass-effect` 容器应用模糊滤镜,确保其内部的内容保持清晰可见而仅使背后的视觉变得朦胧[^1]。 ```css .glass-effect { /* ...其他基础样式 */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Safari 支持 */ } ``` #### 添加背景花纹覆盖层 创建一个新的子级 div 来承载实际显示出来的背景图形。此元素会被定位到父级之上并充满整个区域;同时调整透明度以便于透过它看到下方经过模糊处理后的视窗[^2]。 ```css .pattern-layer { position: absolute; inset: 0; background-image: url('path/to/pattern.png'); background-size: cover; opacity: 0.7; /* 可根据需求修改 */ pointer-events: none; /* 防止干扰交互操作 */ mix-blend-mode: lighten; /* 提升整体亮度 */ } ``` 这样就可以得到既拥有半透明质感又具备独特装饰性的毛玻璃组件了!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值