php 遮罩设置,下拉半透背景遮罩

最新推荐文章于 2021-03-29 05:33:15 发布
最新推荐文章于 2021-03-29 05:33:15 发布
阅读量167 收藏
点赞数
文章标签： php 遮罩设置
这篇博客介绍了如何使用CSS和JavaScript实现响应式的导航菜单，包括在屏幕宽度超过768px时的布局样式和导航菜单的半透明背景遮罩效果。当鼠标悬停在菜单项上时，遮罩会根据子菜单的高度动态调整，并改变颜色。同时，还涉及了输入框和按钮的样式调整以及jQuery代码实现菜单项的悬停效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

下拉半透背景遮罩

@media only screen and (min-width: 768px) {

/* Add your Desktop Styles here */

/*nav width*/

/*.main_menu {

width: 100%;

padding-left: 300px;

}

.avia-menu {

display: table;

width: 100%;

}

.av-main-nav {

display: table-row;

}

.av-main-nav > li {

display: table-cell;

float: none !important;

}

*/

/*nav background*/

.avia-menu2 {

display: table;

opacity:0;

width: 100%;

height:250px;

background: rgba(0,0,0,0.7);

}

/*nav buttom width*/

.av-main-nav > li > a {padding: 0 23px; !important}

.menu-item ul { background-color:transparent !important;box-shadow: none !important;}

.menu-item a { background-color:transparent !important;}

#top #wrap_all .av-main-nav ul > li > a{ color: #fff !important; font-weight:bold;}

#top #wrap_all .av-main-nav ul > li:hover > a{ color: #ca2151 !important;}

.av-main-nav ul { width: 400px !important;}

.av_secondary_right nav.sub_menu { right:-120px; }

.av_icon_active_right ul.social_bookmarks { right:170px; position:relative;}

.av_secondary_right nav.sub_menu #avia2-menu ul.sub-menu li { position: relative; right:-45px;}

.av_secondary_right nav.sub_menu #avia2-menu ul.sub-menu li:hover a { color: #ca2151 !important;}

#header_main .main_menu .sub-menu li span.avia-menu-text img{

width:60px; height:60px;    vertical-align: middle;

display:inline; padding:0; margin:0 10px 0 0;}

}

form.wpcf7-form textarea.wpcf7-textarea, form.wpcf7-form input.wpcf7-text {

width: 100% !important;

margin-bottom: 0 !important;

margin-top: 7px !important;

display: inline !important;

min-width: 50px !important;

padding: 13px !important;

border-radius: 2px !important;

}

form.wpcf7-form textarea.wpcf7-textarea {

height: 90px;

}

form.wpcf7-form input[type='submit'] {

transition: all 0.3s ease-in-out !important;

margin: 0 !important;

padding: 16px 20px !important;

border-radius: 2px !important;

border-bottom-width: 1px !important;

border-bottom-style: solid !important;

font-weight: normal !important;

font-size: 0.92em !important;

min-width: 142px !important;

outline: none !important;

}

form.wpcf7-form input[type='submit']:hover {

background-color: #d5063d !important;

color: #000000 !important;

border-color: #b3041b !important;

}

form.wpcf7-form input.wpcf7-file{

width:50% !important;

}

jQuery(document).ready(function($)

{

/*start*/

$("nav.main_menu").append("

$("#avia-menu li.menu-item-has-children").hover(function(){

var btmHeight = $(this).children("ul.sub-menu").height()+10;

if(btmHeight<250){btmHeight=250}

$(".avia-menu2").css({"opacity":"1","height":btmHeight});

},function(){

$(".avia-menu2").css({"opacity":"0","height":"0px"});

});

/*end*/

}) 

©著作权归作者所有：来自51CTO博客作者yangzhuozhuo的原创作品，如需转载，请注明出处，否则将追究法律责任

小援
关注
Unreal Engine开发：高级渲染技术_5.材质编辑器高级使用
chenlz2007的博客
03-23 1032
自定义材质表达式允许开发者编写自己的HLSL代码，以实现特定的渲染效果。// 自定义材质表达式代码// 输入参数：BaseColor, ColorMultiplier// 输出参数：ResultColor// 输入颜色// 颜色乘数// 计算结果颜色// 返回结果颜色通过深入理解材质表达式、材质函数、材质层和材质参数集合等高级功能，开发者可以在Unreal Engine中创建出更加复杂和逼真的材质效果。性能优化和调试技巧也是确保材质在实际项目中表现良好的关键。
【CSS基础】- 05（定位模式、网页布局、元素的显示与隐藏）
2401_88733006的博客
04-09 1220
定位模式、网页布局、元素的显示与隐藏
php实现给图片加灰色半透明效果的方法
12-18
本文实例讲述了php实现给图片加灰色半透明效果的方法。分享给大家供大家参考。具体实现方法如下： 原理： 1.首先计算出原图片的尺寸 2.创建相同尺寸的半透明图片 3.使用 imagecopy()方法，把新创建的半透明图片与原图合并 具体实现代码如下： 复制代码 代码如下:<?php /*php 给图片加灰色透明效果*/ $imfile = ‘./0.jpg’;//原图 $origim = imagecreatefromjpeg($imfile);//从 JPEG 文件或 URL 新建一图像   $w=imagesx($origim);//原图宽度 $h=imagesy($origim
php如何使用遮罩,html添加遮罩效果
weixin_39915308的博客
03-29 212
这里使用div+css的方式，加载中的图片是网上下载的动图，大家可以根据自己的需要进行修改。(推荐教程：html教程)实现代码：DIV CSS遮罩层function showdiv() {document.getElementById("bg").style.display ="block";/* document.getElementById("show").style.display ="bl...
php 遮罩层,简单遮罩层的实现
weixin_33998219的博客
03-24 344
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DIVCSS遮罩层functionshowdiv(){document.getElementById("bg").style.display="block";doc...
php中遮罩层怎么做,js+html实现遮罩层效果
weixin_39639600的博客
03-21 137
//遮罩function coverDiv(){var procbg = document.createElement("div"); //首先创建一个divprocbg.setAttribute("id","mybg"); //定义该div的idprocbg.style.background = "#000000";procbg.style.width = "100%";procbg.style...
php gd 透明,PHP的GD使用一个图像来掩盖另一个图像，包括透明度
weixin_35952427的博客
03-16 247
马特，如果你用黑色背景上的椭圆形白色填充而不是透明背景的黑色填充，你可以使用下面的函数。这里是对这个脚本的一个小升级 – 我发现如果源图像本身具有透明度，则使用上面的脚本绘制一个背部像素，而不是源图像的透明像素。 下面的扩展脚本考虑了源图像的透明度，并保留它。// Load source and mask $source = imagecreatefrompng( '1.png' ); $mask...
很犀利的弹出层，弹出层代码
07-08
- **遮罩层**：创建一个全屏半透明的遮罩层，增加弹出层的视觉效果，同时阻止用户对背景内容的交互。 - **响应式设计**：考虑不同设备和屏幕尺寸，利用媒体查询（`@media`）确保弹出层在不同环境下都能正常显示。 ...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style/css/common.css" rel="stylesheet"> <title>硬件运维系统 - 报告管理</title> <link href="style/css/report.css" rel="stylesheet"> </head> <body> <div id="header-container"></div> <div class="container"> <h2 class="page-title">报告管理</h2> <div class="action-bar"> <div class="search-box"> <input type="text" id="search-report" placeholder="搜索报告名称/类型"> <button class="btn" id="search-btn">搜索</button> </div> <div> <button class="btn" id="sort-by-date">按日期排序</button> <button class="btn btn-download" id="download-all">下载全部报告</button> <button class="btn" id="add-report">新增报告</button> </div> </div> <!-- 新增：添加滚动容器 --> <div class="report-container"> <div id="report-list" class="report-list"> <!-- 报告卡片将动态生成 --> </div> </div> </div> <!-- 报告编辑模态框 --> <div id="report-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h2 id="modal-title">新增报告</h2> <span class="close">×</span> </div> <form id="report-form"> <input type="hidden" id="report-id"> <div class="form-group"> <label for="report-name">报告名称</label> <input type="text" id="report-name" required> </div> <div class="form-group"> <label for="report-type">报告类型</label> <select id="report-type" required> <option value="硬件故障处理报告">硬件故障处理报告</option> <option value="软件运维报告">软件运维报告</option> <option value="设备健康度报告">设备健康度报告</option> <option value="产线运行分析报告">产线运行分析报告</option> <option value="硬件日志采集报告">硬件选择 - 获取指定时间段的日志</option> </select> </div> <!-- 日志时间段选择区 --> <div class="form-group log-time-range"> <label for="log-start-date">日志开始日期</label> <input type="date" id="log-start-date" required> <label for="log-end-date" style="margin-top: 10px;">日志结束日期</label> <input type="date" id="log-end-date" required> </div> <div class="form-group"> <label for="report-date">报告生成日期</label> <input type="date" id="report-date" required> </div> <div class="form-group"> <label for="report-content">报告内容</label> <div class="template-desc" id="content-desc">请根据报告类型填写内容...</div> <textarea id="report-content" required></textarea> </div> <div class="modal-footer"> <button type="button" class="btn" id="cancel-btn">取消</button> <button type="submit" class="btn">保存</button> </div> </form> </div> </div> <!-- 引入本地 jQuery --> <script src="style/js/jquery.min.js"></script> <script> // 检查登录状态 if (localStorage.getItem('isLogin') !== '1') { window.location.href = 'login.html'; } // 初始化报告数据和硬件日志数据 let reports = []; let hardwareLogs = []; // DOM 元素缓存 const $reportList = $('#report-list'); const $reportModal = $('#report-modal'); const $modalTitle = $('#modal-title'); const $reportForm = $('#report-form'); const $reportId = $('#report-id'); const $reportName = $('#report-name'); const $reportType = $('#report-type'); const $reportDate = $('#report-date'); const $reportContent = $('#report-content'); const $addReportBtn = $('#add-report'); const $cancelBtn = $('#cancel-btn'); const $closeBtn = $('.close'); const $searchBtn = $('#search-btn'); const $searchInput = $('#search-report'); const $sortByDateBtn = $('#sort-by-date'); const $downloadAllBtn = $('#download-all'); const $logTimeRange = $('.log-time-range'); const $contentDesc = $('#content-desc'); // 报告类型模板映射 const typeTemplates = { '硬件故障处理报告': `1. 故障现象： 2. 故障排查过程： 3. 处理方案： 4. 处理结果： 5. 预防建议：`, '软件运维报告': `1. 运维内容： 2. 操作过程： 3. 运行状态： 4. 遗留问题： 5. 后续计划：`, '设备健康度报告': `1. 设备状态： 2. 检查项目： 3. 异常项： 4. 维护建议： 5. 预测分析：`, '产线运行分析报告': `1. 生产数据： 2. 设备表现： 3. 瓶颈分析： 4. 改进措施： 5. 提升建议：`, '硬件日志采集报告': `### 日志采集说明 - 采集时间段：{startDate} 至 {endDate} - 涉及设备：自动从日志中提取 - 异常日志数量：{errorCount} ### 关键日志摘要 {logSummary} ` }; // 从API加载报告数据 function loadReports() { $.ajax({ url: 'api/reports.php', method: 'GET', dataType: 'json', success: function (data) { reports = data || []; renderReports(reports); }, error: function (xhr, status, error) { console.error('加载报告失败:', error); $reportList.html('<p style="text-align:center;padding:20px;">加载报告数据失败，请稍后重试</p>'); } }); } // 加载硬件日志数据 function loadHardwareLogs() { $.getJSON('data/hardware_logs.json', (data) => { hardwareLogs = data.logs || []; console.log('硬件日志加载成功'); }).fail((xhr, status, error) => { console.error('加载硬件日志失败:', error); hardwareLogs = []; }); } // 渲染报告列表 function renderReports(reportData) { $reportList.empty(); // 解绑之前的事件处理器，避免重复绑定 $reportList.off('click', '.edit-btn'); $reportList.off('click', '.delete-btn'); $reportList.off('click', '.download-btn'); if (reportData.length === 0) { $reportList.html('<p style="text-align:center;padding:20px;">暂无报告数据，请点击"新增报告"创建</p>'); return; } reportData.forEach(report => { const $card = $(` <div class="report-card" data-id="${report.id}"> <div class="report-info"> <h3>${report.name}</h3> <div class="report-meta"> <span>${report.type} | </span> <span>生成日期：${report.date}</span> </div> </div> <div class="report-action"> <button class="action-btn download-btn">下载</button> <button class="action-btn edit-btn">编辑</button> <button class="action-btn delete-btn">删除</button> </div> </div> `); $reportList.append($card); }); // 绑定事件 $reportList.on('click', '.edit-btn', function () { const reportId = $(this).closest('.report-card').data('id'); editReport(reportId); }); $reportList.on('click', '.delete-btn', function () { const reportId = $(this).closest('.report-card').data('id'); deleteReport(reportId); }); $reportList.on('click', '.download-btn', function () { const reportId = $(this).closest('.report-card').data('id'); downloadReport(reportId); }); } // 打开模态框 function openModal(isEdit = false, report = null) { $reportForm[0].reset(); $logTimeRange.hide(); $reportContent.val(''); if (isEdit && report) { $modalTitle.text('编辑报告'); $reportId.val(report.id); $reportName.val(report.name); $reportType.val(report.type); $reportDate.val(report.date); $reportContent.val(report.content); if (report.type === '硬件日志采集报告') { $logTimeRange.show(); $('#log-start-date').val(report.logStartDate || ''); $('#log-end-date').val(report.logEndDate || ''); } } else { $modalTitle.text('新增报告'); $reportId.val(''); $reportDate.val(new Date().toISOString().split('T')[0]); } $reportModal.show(); } // 关闭模态框 function closeModal() { $reportModal.hide(); } // 编辑报告 function editReport(id) { console.log('编辑报告：', reports); console.log('报告ID：', id); const stringId = String(id); const report = reports.find(r => r.id === stringId); console.log('编辑报告：', report); // console.log(r.id); if (report) { openModal(true, report); } else { alert('未找到该报告'); loadReports(); } } // 删除报告 function deleteReport(id) { const stringId = String(id); const report = reports.find(r => r.id === stringId); if (!report) { alert('未找到该报告'); loadReports(); return; } if (confirm(`确定要删除"${report.name}"这份报告吗？删除后无法恢复！`)) { $.ajax({ url: 'api/reports.php', method: 'DELETE', contentType: 'application/json', data: JSON.stringify({ id: id }), dataType: 'json', success: function (response) { if (response.success) { loadReports(); // 重新加载数据 } else { alert('删除失败：' + (response.message || '未知错误')); } }, error: function (xhr, status, error) { console.error('删除报告失败:', error); alert('删除报告失败，请检查网络连接'); } }); } } // 下载单个报告 function downloadReport(id) { const report = reports.find(r => r.id === id); if (!report) return; let content = ` 报告名称：${report.name} 报告类型：${report.type} 生成日期：${report.date} 报告内容： ${report.content} `.trim(); if (report.type === '硬件日志采集报告' && report.attachments && report.attachments.length) { content += `\n\n=== 日志附件 ===\n`; report.attachments.forEach(attach => { content += `\n【附件：${attach.filename}】\n${attach.content}\n`; }); } const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = $('<a>').attr({ href: url, download: `${report.name.replace(/[\/:*?"<>|]/g, '-')}.txt` }); $('body').append(a); a[0].click(); a.remove(); URL.revokeObjectURL(url); } // 下载全部报告 function downloadAllReports() { if (reports.length === 0) { alert('没有报告可下载'); return; } let allContent = '=== 所有报告汇总 ===\n\n'; reports.forEach((report, idx) => { allContent += `【报告 ${idx + 1}】\n`; allContent += `名称：${report.name}\n类型：${report.type}\n日期：${report.date}\n\n`; allContent += `内容：\n${report.content}\n\n`; if (report.type === '硬件日志采集报告' && report.attachments && report.attachments.length) { allContent += `=== 日志附件 ===\n`; report.attachments.forEach(attach => { allContent += `\n【附件：${attach.filename}】\n${attach.content}\n`; }); } allContent += '========================================\n\n'; }); const blob = new Blob([allContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = $('<a>').attr({ href: url, download: `所有报告汇总_${new Date().toISOString().split('T')[0]}.txt` }); $('body').append(a); a[0].click(); a.remove(); URL.revokeObjectURL(url); } // 保存报告 $reportForm.on('submit', function (e) { e.preventDefault(); const formData = { id: $reportId.val(), name: $reportName.val(), type: $reportType.val(), date: $reportDate.val(), content: $reportContent.val(), attachments: [] }; if (formData.type === '硬件日志采集报告') { const startDate = $('#log-start-date').val(); const endDate = $('#log-end-date').val(); formData.logStartDate = startDate; formData.logEndDate = endDate; const filteredLogs = hardwareLogs.filter(log => { const logTime = new Date(log.timestamp); const start = new Date(startDate); const end = new Date(endDate); return logTime >= start && logTime <= end; }); if (filteredLogs.length > 0) { const errorCount = filteredLogs.filter(log => log.level === 'ERROR').length; const logSummary = filteredLogs.map(log => `[${log.timestamp}] [${log.device}] [${log.level}]：${log.content}` ).join('\n'); formData.content = typeTemplates['硬件日志采集报告'] .replace('{startDate}', startDate) .replace('{endDate}', endDate) .replace('{errorCount}', errorCount) .replace('{logSummary}', logSummary); formData.attachments.push({ filename: `hardware_logs_${startDate}_${endDate}.txt`, content: filteredLogs.map(log => `${log.timestamp}\n${log.device}\n${log.level}\n${log.content}\n-----\n` ).join('') }); } else { formData.content = '未找到指定时间段的日志数据'; } } const method = formData.id ? 'PUT' : 'POST'; $.ajax({ url: 'api/reports.php', method: method, contentType: 'application/json', data: JSON.stringify(formData), dataType: 'json', success: function (response) { if (response.success) { loadReports(); closeModal(); } else { alert('保存失败：' + (response.message || '未知错误')); } }, error: function (xhr, status, error) { console.error('保存报告失败:', error); alert('保存报告失败，请检查网络连接'); } }); }); // 搜索报告 function handleSearch() { const keyword = $searchInput.val().toLowerCase(); const filtered = reports.filter(report => report.name.toLowerCase().includes(keyword) || report.type.toLowerCase().includes(keyword) ); renderReports(filtered); } // 按日期排序 function sortReportsByDate() { const sorted = [...reports].sort((a, b) => new Date(b.date) - new Date(a.date) ); renderReports(sorted); } // 事件绑定 function bindEvents() { // 报告类型切换 // / 修改报告类型切换事件 $reportType.on('change', function () { const type = $(this).val(); const $startDate = $('#log-start-date'); const $endDate = $('#log-end-date'); $logTimeRange.hide(); $contentDesc.text('请根据报告类型填写内容...'); if (type === '硬件日志采集报告') { $logTimeRange.show(); $contentDesc.text('选择时间段后将自动生成日志摘要'); $reportContent.val(''); // 仅在日志类型下添加必填属性 $startDate.attr('required', true); $endDate.attr('required', true); } else { $reportContent.val(typeTemplates[type] || ''); // 其他类型下移除必填属性 $startDate.removeAttr('required'); $endDate.removeAttr('required'); } }); // 新增报告 $addReportBtn.on('click', () => openModal()); // 关闭模态框 $closeBtn.on('click', closeModal); $cancelBtn.on('click', closeModal); // 点击模态框外部关闭 $(window).on('click', (e) => { if ($(e.target).is($reportModal)) closeModal(); }); // 搜索 $searchBtn.on('click', handleSearch); $searchInput.on('keypress', (e) => { if (e.key === 'Enter') handleSearch(); }); // 排序 $sortByDateBtn.on('click', sortReportsByDate); // 下载全部 $downloadAllBtn.on('click', downloadAllReports); } // 初始化 function init() { bindEvents(); loadHardwareLogs(); loadReports(); } // 页面加载完成后初始化 $(document).ready(init); </script> </body> </html> 优化代码.让拟态窗更加好看
最新发布
07-24
模态框居中显示，并且背景遮罩层半透明。 2. 模态框的边框、阴影、圆角等。 3. 表单内部元素的样式：输入框、下拉框、按钮等。 4. 调整日志时间选择区域的布局（当显示时）。 但是，我们注意到原代码中已经有...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
上传一个超级轻量级的遮罩弹框组件
01-17
这是一个超级轻量级的弹框组件 适用于手机 PC web的开发 因为是轻量级，所以更加方便集成 和修改
php中遮罩层怎么做,jQuery遮罩层实现方法
weixin_29706351的博客
03-21 159
本文主要为大家详细介绍了jQuery遮罩层实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家1.1 背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景，且须设置为绝对定位，以下是项目中用到的css样式：/* 半透明的遮罩层 */#overlay {background: #000;filter: alpha(opacity=50); /* IE的透明度 */opacity...
php 图片遮罩,css怎么在图片上显示遮罩层
weixin_39668470的博客
03-17 414
css在图片上显示遮罩层的方法：首先检查图像容器和图像样式，并查看遮罩层的样式定义；然后添加用于鼠标移动的脚本代码以显示遮罩层；最后添加mouseover和mouseout事件即可。本教程操作环境：windows7系统、css3版，DELL G3电脑。css在图片上显示遮罩层的方法：1．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。2．然后，查看...
php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业
weixin_39654352的博客
03-24 107
CSS绝对定位实现窗口遮罩功能:这是HTML代码部分实例html>绝对定位之遮罩用户登录窗口用户名：密码：登录运行实例 »点击 "运行实例" 按钮查看在线实例这里是CSS绝对定位－遮罩：css部分实例body{margin:0;background-image:url(../images/php.jpg);background-repeat:no-repeat;background-...
遮罩层
php_Zhaop的博客
12-21 1119
CSS代码：           .mask {                    position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;                  z-index: 1002; left: 0px;                  opacit
实现遮罩效果
cvper's world !
05-07 1296
&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; &
Winform实现背景半透明及GIF显示的遮罩层
当涉及到在Winform中实现特定的视觉效果时，例如半透明遮罩层，就需要对控件进行特定的设置，使其表现得既美观又实用。 标题“Winform半透明遮罩层”所指的知识点涉及以下几个方面： ### 半透明效果的实现原理 半...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值