Heim > Web-Frontend > HTML-Tutorial > So stellen Sie in HTML ein Video auf einen undurchsichtigen Hintergrund ein

So stellen Sie in HTML ein Video auf einen undurchsichtigen Hintergrund ein

coldplay.xixi
Freigeben: 2023-01-03 09:24:09
Original
4351 Leute haben es durchsucht

So stellen Sie Videos in HTML auf einen undurchsichtigen Hintergrund ein: Verwenden Sie die Schleife, die Autoplay-Methode, fügen Sie den relevanten Code direkt ein [

So stellen Sie in HTML ein Video auf einen undurchsichtigen Hintergrund ein

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer. Diese Methode ist für alle Computermarken geeignet.

So stellen Sie ein Video in HTML auf einen undurchsichtigen Hintergrund ein:

Fügen Sie zunächst den folgenden Code ein:

<video src="../video/2b.mp4" loop="loop" autoplay="autoplay"></video>
Nach dem Login kopieren
  • loop bedeutet Schleifenwiedergabe loop表示循环播放

  • autoplay

autoplay bedeutet automatisches Abspielen

css wie folgt geändert:

<style>
body{
    margin:0;//body外边距设为0;
}
video{
    position: fixed;//视频定位方式设为固定
    right: 0;
    bottom: 0;//视频位置
    min-width: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    width: auto;
    height: auto; //尺寸保持原视频大小
    z-index: -100; //z轴定位,小于0即可
    -webkit-filter: grayscale(20%);//添加灰度蒙版,如果设定为100%则视频显示为黑白
}
</style>
Nach dem Login kopieren
Verwandte Lernempfehlungen: HTML-Tutorial🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo stellen Sie in HTML ein Video auf einen undurchsichtigen Hintergrund ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage