【羽图】《一程山水》
<div style="POSITION: relative; WIDTH: 1600px; TOP: 130px; left: calc(50% - 881px);">
<img src="https://pic.imgdb.cn/item/65a3e607871b83018a81959a.jpg
">
</div>
<audio style="width:0px; height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=5273614.mp3" type="audio/mpeg"></audio>
<br><br><br><br><br><br><br><br><br> 我如果添加了mp4，图的画面就会变得很暗淡，也不知道是啥原因，{:4_203:} 千羽 发表于 2024-1-15 19:48
我如果添加了mp4，图的画面就会变得很暗淡，也不知道是啥原因，
通常，视频设置了透明度，以便帖子主体内容能显示出来，即使如此，视频还是会对帖子主内容有所遮挡的。解决这个问题，可以：
选择或制作纯黑底色的视频，然后对视频使用 mix-blend-mode 融合滤镜，这可将视频底色全部去掉。举个栗子，在CSS中设置视频：
#vid {
/* 其他代码 */
mix-blend-mode: screen;
}
视频HTML代码：
<video id="vid" src="..." ....></video> 马黑黑 发表于 2024-1-15 20:11
通常，视频设置了透明度，以便帖子主体内容能显示出来，即使如此，视频还是会对帖子主内容有所遮挡的。解 ...
黑黑老师，怎么在别的论坛就不存在这样的问题呢？{:4_203:} 千羽 发表于 2024-1-15 20:13
黑黑老师，怎么在别的论坛就不存在这样的问题呢？
不会不存在，一切取决图片的亮度和透明度的多寡以及视频自身的诸多因素。 马黑黑 发表于 2024-1-15 20:11
通常，视频设置了透明度，以便帖子主体内容能显示出来，即使如此，视频还是会对帖子主内容有所遮挡的。解 ...
黑黑老师，这个操作对我来说会太难了，首先选纯黑色的视频太费时间，还不一定和图的画面相搭，再次，我还
不会在在CSS中设置视频……{:4_201:}
这图这音乐，组合的意境简直完美！把那几句文字表现得淋漓尽致了。这功夫了得。不得不说，咱千羽就是牛！{:4_187:} 马黑黑 发表于 2024-1-15 20:14
不会不存在，一切取决图片的亮度和透明度的多寡以及视频自身的诸多因素。
真的是不存在啊，否则我也会不添加mp4的 {:4_181:} 千羽 发表于 2024-1-15 20:17
黑黑老师，这个操作对我来说会太难了，首先选纯黑色的视频太费时间，还不一定和图的画面相搭，再次，我还 ...
多少都要设置的，两个重要属性决定了视频的呈现形态：
object-fit: cover;/* 视频铺满父元素 */
mix-blend-mode: screen; /* 去掉视频黑色背景 */ 醉美水芙蓉 发表于 2024-1-15 20:14
千羽图图真漂亮！
问好芙蓉，谢谢啦{:4_187:} 千羽 发表于 2024-1-15 20:20
真的是不存在啊，否则我也会不添加mp4的
这个视频代码是从我那里传出去的，黑色背景的使用滤镜后，就不存在你说的现象。 马黑黑 发表于 2024-1-15 20:22
这个视频代码是从我那里传出去的，黑色背景的使用滤镜后，就不存在你说的现象。
我知道黑黑老师是这代码的发源地，但我也没说慌……{:5_148:} 千羽 发表于 2024-1-15 20:24
我知道黑黑老师是这代码的发源地，但我也没说慌……
如果视频对背景没有影响，那么，存在两个可能：一是，透明度设极高，比如 .15，二是，使用了去掉黑色或白色背景的滤镜；或两者均使用。 本帖最后由 千羽 于 2024-1-15 20:29 编辑 <br /><br />马黑黑 发表于 2024-1-15 20:21
多少都要设置的，两个重要属性决定了视频的呈现形态：
object-fit: cover;/* 视频铺满父元素 */
黑黑老师，你看哈：
<style>
#mydiv { margin: 0 0 0 calc(50% - 881px);
display: grid;
place-items: center;
width: 1600px;
height: 1000px;
top:130px;
background: lightblue url('https://pic.imgdb.cn/item/65a3e607871b83018a81959a.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.mypic {
position: absolute;
right:920px;
top: 160px;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .20;
}
</style>
<div id="mydiv">
<div class="mypic"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/13/5b514e39921d5.mp4" autoplay="" loop="" muted=""></video>
</div>
<br><br><br><br><br><br><br><br>
千羽 发表于 2024-1-15 20:26
本帖最后由 千羽 于 2024-1-15 20:29 编辑
黑黑老师，你看哈：
你用的滤镜是multiply，它不一样的。融合滤镜用什么值，根据视频背景和自己所需要的效果决定，我说的不遮盖主帖，对视频是有需求的：黑底视频，用 screen 融合滤镜过滤掉黑色。
你可以看看我这个帖子，视频是黑色底：
帖子：http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1704544712
视频：https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4
帖子背景图：https://638183.freep.cn/638183/t24/jpg/despacito.jpg 千羽 发表于 2024-1-15 20:26
本帖最后由 千羽 于 2024-1-15 20:29 编辑
黑黑老师，你看哈：
今天这个mp4好像影响还不大 马黑黑 发表于 2024-1-15 20:26
如果视频对背景没有影响，那么，存在两个可能：一是，透明度设极高，比如 .15，二是，使用了去掉黑色或白 ...
知道了，黑黑老师{:4_181:} 马黑黑 发表于 2024-1-15 20:32
你用的滤镜是multiply，它不一样的。融合滤镜用什么值，根据视频背景和自己所需要的效果决定，我说的不遮 ...
好像还变亮了一点呢{:4_181:} 千羽 发表于 2024-1-15 20:38
好像还变亮了一点呢
不同的滤镜，产生的作用不一样，这和ps是一个道理