在屏幕底部创建一个固定的选取框。但是,一旦物体固定,背景颜色(#ffffff)就会消失。我试过将它添加到几个不同的地方,但是没有运气。我在这里想念什么?
在此处查看正在运行的网站:http://www.rauques.com/
此部分适用于全局(允许固定项目覆盖wordpress主题)。
/* This is what makes our section fixed */
.fixed-section {
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
mix-blend-mode: multiply;
display: block;
}
/* This makes our fixed elements clickable */
.fixed-section .column-content {
pointer-events: auto !important;
}
以下是固定字幕的HTML / CSS:
<html>
<head>
<style>
.marquee {
height: 40px;
width: 100% ;
display: block;
background-color: #ffffff !important;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 50px;
background-color: #ffffff !important;
position: absolute;
overflow: hidden;
animation: marquee 8s linear infinite;
display: block;
}
.marquee span {
float: left;
width: 50%;
color: #000000;
background-color: #ffffff !important;
}
hr.style1 {
display: block;
margin-top: 0em;
margin-bottom: 0em;
}
hr.style2 {
display: block;
margin-top: 10px;
margin-bottom: 0em;
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
</style>
</head>
<body>
<hr class="style1">
<div class="marquee">
<div>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span><br>
</div>
</div>
<hr class="style2">
</body>
</html>
问题是由mix-blend-mode: multiply;
类的属性.fixed-section
引起的,将其更改为normal
。