div css显示问题！透明度和遮罩，急急急

Posted 2023-05-12

知道的大侠给整个例子谢谢！！
就是这类的导航怎么实现？？？

css代码 

<style>

 .div

 position:absolute;

 left:50;

 top:70; 

 width:150;

 

  

    .img

     position:absolute;

     top:20;

     left:40;

     filter:alpha(opacity=80)

 

 

 </style>

页面代码

<div>

  <p>

  <font class="textShadow">选择公文

  </font>

  <font class="textsd">leaf

  </font>

  </p>

  <p style="font-size:48;font-weight:bold;color:red;">

  Beautiful </p>

<p><img src="web/7.jpg" style="position:absolute;

     top:20;

     left:40;

     filter:alpha(opacity=0,finishopacity=100,

  style=1,startx=0,starty=85,finishx=150,finishy=85)" ></p>

</div>

效果图：

参考技术A 这个是导航的背景好吧，没必要用遮罩这么麻烦。

在CSS中，alpha是来设置透明度的。
先来看一下它的表达格式：
filter：alpha（opacity=opcity，finishopacity=finishopacity， style=style，startX=startX，startY=startY，finishX=finishX， finishY=finishY）
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
可惜的是滤镜不是CSS标准，只在IE中支持，在其他浏览器中是不支持的。

所以，如果想兼容多浏览器，建议不要用滤镜！直接用图片本回答被提问者采纳 参考技术B css的透明度是用IE的filter:Alpha(opacity=[0-100])与css2的opacity:[0.00-1.00]做浏览器兼容的,但你的图片好像没使用透明度,不知道你想要的是什么效果 参考技术C 可以拿去检查一下 如果没撒问的话，还不行， 该换了 参考技术D ww

Photofunia 如何在预定义的模板上渲染和遮罩图像？

【中文标题】Photofunia 如何在预定义的模板上渲染和遮罩图像？

【英文标题】：How does Photofunia render and mask images on predefined templates?

【发布时间】：2021-07-31 03:16:51

【问题描述】：

Photofunia 如何在预定义模板上屏蔽图像？

用 PHP 可以做到这一点吗？我需要特殊技术吗？感谢您的帮助和指导。

原图：

photofunia 渲染的图像：

【问题讨论】：

您可以使用使用 ImageMagick 的 PHP Imagick 来做到这一点。两者通常都预装在 Linux 上，但也可以安装在 Windows 和 Mac 上。你也可以使用 PHP exec() 在没有 Imagick 的情况下运行 ImageMagick 命令。

【参考方案1】：

你可以使用imagemagick。

当前版本是 ImageMagick 7.0.11-12。它可以在Linux、Windows、Mac Os X、iOS、Android 操作系统等上运行。

请阅读此文档： imagemagick、example、other doc、php sample

好好享受吧：）

【参考方案2】：

您可以使用 Imagik php 库对图像进行遮罩，并使用 pslayers 库创建类似于 Photoshop 的柔光模式。 https://github.com/darrynten/pslayers

【讨论】：

有没有nodeJS/javascript的库？