DW做的网站都能打开吗,网站如何宣传推广,推广做黄页网站,四川省住建厅考试报名官网使用场景
在生产环境中#xff0c;遇到一个需求#xff0c;需要在一个深色风格的大屏页面中#xff0c;嵌入 Google Maps。为了减少违和感#xff0c;希望地图四边能够淡出过渡。
这里的“淡出过渡”#xff0c;关键是淡出#xff0c;而非降低透明度。
基于 Google Ma…使用场景
在生产环境中遇到一个需求需要在一个深色风格的大屏页面中嵌入 Google Maps。为了减少违和感希望地图四边能够淡出过渡。
这里的“淡出过渡”关键是淡出而非降低透明度。
基于 Google Maps 的深色示例中附加上述需求效果如下 简单的说就是中间放地图四周放标题和其它展板内容。
CSS mask-image SVG
简化一下把地图换成图片实现一个示例。 示例中注释掉“mask”标记的内容恢复“svg test”标记的内容可以查看 svg 。 准备工作定义一个“容器”和“目标”层
div idcontainerimg idtarget srchttps://cdn.pixabay.com/photo/2024/07/28/09/04/mountain-8927018_1280.jpg!-- svg test --!-- div idtarget stylewidth:1920px;height:1080px;/div --
/div基础样式
body {margin: 0;background-color: black;
}#container {position: absolute;width: 100%;height: 100%;background-repeat: repeat;display: flex;align-items: center;justify-content: center;
}#target {max-width: 80%;max-height: 80%;/* mask */-webkit-mask-mode: alpha;mask-mode: alpha;mask-repeat: no-repeat;mask-size: 100% 100%;/* svg test *//* background-repeat: no-repeat;background-size: 100% 100%; */
}
给“容器”添加一个波点背景为了验证淡出过渡区域可以透视背景这里直接用 svg 实现
(function() {const container document.querySelector(#container);const containerBg svg xmlnshttp://www.w3.org/2000/svg width30 height30circle fillrgba(255,255,255,0.1) cx15 cy15 r10 //svg;container.style.backgroundImage url(data:image/svgxml;utf8,${encodeURIComponent(containerBg)});// 略
})();接着给“目标”准备一个处理方法如果目标是一个图片为了获得图片大小将在图片的 onload 中执行
(function() {// 略const target document.querySelector(#target);function setTargetBg() {// 略}target.onload setTargetBgsetTargetBg()
})();为了实现淡出过渡效果需要准备一个 svg 分为 41 块上下左右 4 个梯形 path中间 1 个矩形 rect。 4 个梯形分别设置了 4 个方向的 linearGradient 渐变。 这里用代码绘制上面的 svg svg 的宽高是基于“目标”的宽高淡入过渡区域大小 padding 基于“目标”短边的 20%。 特别地patch 和 rect 中的加减“1”目的是为了消除 path 之间的缝隙。 function setTargetBg() {const svgWidth target.offsetWidth,svgHeight target.offsetHeight,padding Math.floor(Math.min(target.offsetWidth, target.offsetHeight) * 0.2),fill white,patch 0.2;const targetMask svg xmlnshttp://www.w3.org/2000/svgxmlns:xlinkhttp://www.w3.org/1999/xlink version1.1width${svgWidth}height${svgHeight} viewBox0 0 ${svgWidth} ${svgHeight}defslinearGradient idmask-bottom-to-top x10 x20 y10 y21stop offset0% stop-colortransparent /stop offset100% stop-color${fill} //linearGradientlinearGradient idmask-top-to-bottom x10 x20 y10 y21stop offset0% stop-color${fill} /stop offset100% stop-colortransparent //linearGradientlinearGradient idmask-rigth-to-left x10 x21 y10 y20stop offset0% stop-colortransparent /stop offset100% stop-color${fill} //linearGradientlinearGradient idmask-left-to-right x10 x21 y10 y20stop offset0% stop-color${fill} /stop offset100% stop-colortransparent //linearGradient/defspath fillurl(#mask-bottom-to-top) dM0,0 L${svgWidth},0 L${svgWidth - padding patch},${padding patch} L${padding - patch},${padding patch} Z/pathpath fillurl(#mask-top-to-bottom) dM0,${svgHeight} L${padding - patch},${svgHeight - padding - patch} L${svgWidth - padding patch},${svgHeight - padding - patch} L${svgWidth},${svgHeight} Z/pathpath fillurl(#mask-rigth-to-left) dM0,0 L${padding patch},${padding} L${padding patch},${svgHeight - padding} L0,${svgHeight} Z/pathpath fillurl(#mask-left-to-right) dM${svgWidth},0 L${svgWidth - padding - patch},${padding} L${svgWidth - padding - patch},${svgHeight - padding} L${svgWidth},${svgHeight} Z/pathrect x${padding - 1} y${padding - 1} width${svgWidth - padding * 2 1 * 2} height${svgHeight - padding * 2 1 * 2} fill${fill}/rect/svg
;// masktarget.style.maskImage url(data:image/svgxml;utf8,${encodeURIComponent(targetMask.replace(/\n/g, ))});// svg test// target.style.backgroundImage url(data:image/svgxml;utf8,${encodeURIComponent(targetMask.replace(/\n/g, ))});}最终效果 在线Demo
