背景图像在视频背后的整个身体后面不可见[重复]
Posted
技术标签:
【中文标题】背景图像在视频背后的整个身体后面不可见[重复]【英文标题】：Background Image not visible behind the entire whole body behind video [duplicate] 【发布时间】：2021-10-24 07:35:41 【问题描述】：点击红色播放图片后没有背景图片可见，为什么不可见，如何才能使其可见？
它的工作原理是，你点击红色的播放图片然后视频显示。
应该有一个背景渐变图像显示在视频后面填充屏幕。
https://jsfiddle.net/7ckned6L/
.containera-inner
display: flex;
flex: 1 0 0%;
background-image:
linear-gradient
<div class="containera hide">
<div class="containera-inner">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
在提供的图片中，后面应该有渐变背景图片，看不到。
为什么看不到，如何解决？
这是在代码中看不到的背景图片。
需要修复和调整哪些内容才能看到背景图片？
确保紫色不可见
(function manageCovera()
function show(el)
el.classList.remove("hide");
function hide(el)
el.classList.add("hide");
function coverClickHandler(evt)
const cover = evt.currentTarget;
hide(cover);
const thewrap = cover.parentElement.querySelector(".containera");
show(thewrap);
const cover = document.querySelector(".playa");
cover.addEventListener("click", coverClickHandler);
());
const videoPlayer = (function makeVideoPlayer()
let player = null;
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event)
player = event.target;
player.setVolume(100); // percent
let hasShuffled = false;
function onPlayerStateChange(event)
player = event.target;
const shufflePlaylist = true;
if (!hasShuffled)
player.setShuffle(shufflePlaylist);
player.playVideoAt(0);
hasShuffled = true;
function addPlayer(video)
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
const config =
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
;
config.playerVars =
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
playlist,
rel: 0
;
config.events =
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
;
player = new YT.Player(video, config);
return
addPlayer
;
());
function onYouTubeIframeAPIReady()
const cover = document.querySelector(".playa");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
html,
body
height: 100%;
margin: 0;
padding: 0;
body
background: #353198;
animation: fade 2s ease 0s forwards;
@keyframes fade
0%
opacity: 0;
100%
opacity: 1;
.outer
display: flex;
min-height: 100%;
box-sizing: border-box;
.tcell
display: flex;
width: 100%;
justify-content: center;
.containera-inner
display: flex;
flex: 1 0 0%;
background-image:
linear-gradient(teal 5px, #0000 5px),
linear-gradient(90deg, teal 5px, #0000 5px),
linear-gradient(black 10px, #0000 10px 160px, black 160px),
linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(black 20px, #0000 20px 150px, black 150px),
linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(black 30px, #0000 30px 140px, black 140px),
linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(black 40px, #0000 40px 130px, black 130px),
linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(black 50px, #0000 50px 120px, black 120px),
linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(black 60px, #0000 60px 110px, black 110px),
linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(black 70px, #0000 70px 100px, black 100px),
linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(black 80px, #0000 80px 90px, black 90px),
linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
linear-gradient(teal, teal);
animation: fade 5s ease 0s forwards;
background-size: 165px 165px;
@keyframes fade
0%
opacity: 0;
100%
opacity: 1;
.playa
margin: auto 20px;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
.playa
fill: red;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
.video-wrapper
max-width: 640px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.ratio-keeper
position: absolute;
top: 0;
bottom: 0;
height: 0;
padding-top: 56.25%;
width: 100%;
margin: auto;
.video-frame
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.hide
display: none;
<div class="outer">
<div class="tcell">
<div class="containera hide">
<div class="containera-inner">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
</div>
</div>
</div>
</div>
<svg class="playa " viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg>
</div>
</div>【问题讨论】：
将相同的样式应用于您的video-wrapper div。 jsfiddle.net/rqL0fm7h
你把整个屏幕变白了。
删除你的问题不会救你，如果你继续这样做，你很快就会被禁止。
【参考方案1】：
您需要更改一小部分代码 align-items:stretch; align-content:stretch; 身高：100%；
.containera-inner
display: flex;
flex: 100%;
flex-direction: column;
background-image:
linear-gradient(teal 5px, #0000 5px),
linear-gradient(90deg, teal 5px, #0000 5px),
linear-gradient(black 10px, #0000 10px 160px, black 160px),
linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(black 20px, #0000 20px 150px, black 150px),
linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(black 30px, #0000 30px 140px, black 140px),
linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(black 40px, #0000 40px 130px, black 130px),
linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(black 50px, #0000 50px 120px, black 120px),
linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(black 60px, #0000 60px 110px, black 110px),
linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(black 70px, #0000 70px 100px, black 100px),
linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(black 80px, #0000 80px 90px, black 90px),
linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
linear-gradient(teal, teal) !important;
animation: fade 5s ease 0s forwards;
background-size: 165px 165px;
width: 1000px;
align-items: stretch;
align-content: stretch;
height: 100%;
output
【讨论】：
小提琴没有显示出来。 紫色背景在您的代码中仍然可见，这意味着它仍未修复。 i.imgur.com/1Ucgk5i.png背景需要覆盖整个身体区域。 @learningtocode435 尝试宽度 100% 这是否为您解决了问题？【参考方案2】：你需要给你的弹性项目全宽（flex: 1）并给孩子全高（display: flex，它调用默认的align-items: stretch）。
将此添加到您的代码中：
.tcell
display: flex;
/* width: 100%; */
justify-content: center;
flex: 1; /* new */
/* new */
.containera
flex: 1;
display: flex;
Revised Fiddle
【讨论】：
它没有覆盖整个区域。 i.imgur.com/SpbzzVk.png 将顶部窗口拉低。 没有覆盖整个区域。 i.imgur.com/Xfu9iWT.png //// jsitor.com/Cjy2AWTRWl "如何让背景图片覆盖溢出区域" 以另一篇文章为参考，指出 CSS 无法解决问题，您的问题并非重复。以上是关于背景图像在视频背后的整个身体后面不可见[重复]的主要内容，如果未能解决你的问题，请参考以下文章