论坛 › ≡ 音画世界≡ › 今日早霞

向荣s 发表于 2024-4-23 15:45:12

今日早霞

<style>
#mydiv { margin: 0 0 0 calc(70% - 781px);
display: grid;
place-items: center;
width: 800px;
height: 1120px;
top:130px;
background: lightblue url('https://image.hnol.net/c/2023-09/18/09/20230918090918541-5107132.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;&nbsp;&nbsp;
}
.mypic {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;position: absolute;
&nbsp; &nbsp; right:60px;
&nbsp; &nbsp; top:30px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;cursor: pointer;
&nbsp; &nbsp; mix-blend-mode: Multiply;
&nbsp; &nbsp; z-index: 3;
&nbsp; &nbsp; }
#vid {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;position: absolute;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width: 100%;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;height: 110%;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;top:-80px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;object-fit: cover;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;pointer-events: none;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;mix-blend-mode: screen;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;z-index: 2;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;opacity: .15;
}
</style>&nbsp; &nbsp;
</p>
<div id="mydiv">
<div class="mypic"><img src="http://image.hnol.net/c/2020-01/12/21/202001122101092431-5107132.gif" alt="" /></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted=""></video>
</div>&nbsp;&nbsp;
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=41659405" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br>

<p>今日早霞<p>
<p>煞是好看</p>
<p>五彩缤纷的季节</p>
<p>我欣赏着早霞</p>
<p>享受它带给我的愉悦</p>

醉梦无痕 发表于 2024-4-23 17:08:55

真美！

红桔子 发表于 2024-4-23 17:47:00

问好向荣老师，非常漂亮。

喝茶 发表于 2024-4-24 08:28:29

小区环境真好，在早霞映照下更美

喝茶 发表于 2024-4-24 08:29:11

那个挂件是怎么弄上去的，真神奇，好美。

向荣s 发表于 2024-4-24 11:25:09

喝茶 发表于 2024-4-24 08:29
那个挂件是怎么弄上去的，真神奇，好美。


代码<style>
#mydiv { margin: 0 0 0 calc(70% - 781px);
display: grid;
place-items: center;
width: 800px;
height: 1120px;
top:130px;
background: lightblue url('https://image.hnol.net/c/2023-09/18/09/20230918090918541-5107132.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;&nbsp;&nbsp;
}
.mypic {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;position: absolute;
&nbsp; &nbsp; right:60px;
&nbsp; &nbsp; top:30px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;cursor: pointer;
&nbsp; &nbsp; mix-blend-mode: Multiply;
&nbsp; &nbsp; z-index: 3;
&nbsp; &nbsp; }
#vid {
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;position: absolute;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;width: 100%;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;height: 110%;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;top:-80px;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;object-fit: cover;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;pointer-events: none;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;mix-blend-mode: screen;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;z-index: 2;
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;opacity: .15;
}
</style>&nbsp; &nbsp;
</p>
<div id="mydiv">
<div class="mypic"><img src="http://image.hnol.net/c/2020-01/12/21/202001122101092431-5107132.gif" alt="" /></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted=""></video>
</div>&nbsp;&nbsp;
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=41659405" autoplay="" loop=""></audio>
<br><br><br><br><br><br><br><br>

<p>今日早霞<p>
<p>煞是好看</p>
<p>五彩缤纷的季节</p>
<p>我欣赏着早霞</p>
<p>享受它带给我的愉悦</p>

向荣s 发表于 2024-4-24 12:00:46

喝茶 发表于 2024-4-26 12:41:43

向荣s 发表于 2024-4-24 11:25
代码
#mydiv { margin: 0 0 0 calc(70% - 781px);
display: grid;


谢谢向美女详解，学习了。

查看完整版本: 今日早霞