我用css将一些模糊效果应用到我的背景视频中.但它显示边缘太模糊.....是否有任何解决方案为视频应用展平模糊css？或者我想从视频边缘移除该发光.提前致谢 !
请参阅下面的代码:
.project-col {
display:inline-block;
width:100%;
position:relative;
background:transparent;
z-index:0
}
.video-col {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: -2;
}
.content {
padding-right:50px;
padding-left:50px;
}
.video-col video {
width:100%;
-webkit-filter: grayscale(100%) blur(5px);
filter: grayscale(100%) blur(5px);
}<div class="project-col">
<div class="video-col">
<video class="video" autoplay preload="auto" loop>
<source src="https://0.s3.envato.com/h264-video-previews/052c2cb4-9997-4833-ad53-2384dca08706/17458620.mp4" type='video/mp4' />
</video>
</div>
<div class="content">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …请查看最后一项，父div填充在这里不起作用。有什么帮助吗？
这是我的代码：
.horizontal-scrollable {
padding: 15px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hide;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
display: flex;
flex-wrap: nowrap;
}
.year-tag {
background: #E6E7E8;
padding: 12px;
font-size: 12px;
line-height: 14px;
border: 0;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
margin-right: 8px;
margin-bottom: 8px;
}<div style="width: 375px;font-family: sans-serif;background:red;">
<div class="horizontal-scrollable year-list">
<a class="year-tag">2020</a>
<a class="year-tag">2019</a>
<a class="year-tag">2018</a>
<a class="year-tag">2017</a>
<a class="year-tag">2016</a>
<a class="year-tag">2015</a>
<a class="year-tag">2014</a>
<a class="year-tag">2013</a>
<a class="year-tag">See More</a>
</div>
</div>我使用datalist函数列出我的产品名称，如果列表太长，垂直滚动不会在 google chrome 和某些浏览器中显示。是否可以overflow-y: scroll为 datalist 添加 css 样式？使用的代码如下：
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option …Stack Overflow 中已经有太多此类老问题了，但现在我想知道有什么新方法可以解决这个问题！
<input type="time">我们如何将所有浏览器的12 小时格式更改为 24 小时格式？如果只使用 JavaScript而无需任何第三方 JS/Jquery，那就太好了。有人可以帮忙吗？
参考问题：
我正在努力将我的普通 jQuery 代码转换为 React JS（我是 React 的新手）。
我有以下代码：
$(".add").click(function () {
$("nav").addClass("show");
});
$(".remove").click(function () {
$("nav").removeClass("show");
});
$(".toggle").click(function () {
$("nav").toggleClass("show");
});nav {
width: 250px;
height: 150px;
background: #eee;
padding: 15px;
margin-top: 15px;
}
nav.show {
background: red;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>尝试过的引用似乎只为同一元素添加/删除类：
如何在 ReactJS 中添加或删除事件上的 className？
那么，如何将相同的 jQuery 方法转换或创建为 ReactJS？
如何在屏幕中间对齐这个猫头鹰项目？
尝试过：center: true
请查看完整页面视图：
var owl = $('.video-thumb').owlCarousel({
items: 7,
autoplay: false,
loop: false,
nav: true,
dots: false,
margin: 30,
center: true,
responsive: {
0: {
items: 1
},
640: {
items: 2
},
768: {
items: 3
},
992: {
items: 4
},
1200: {
items: 5
},
1600: {
items: 7
}
}
});<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="video-thumb owl-carousel owl-theme">
<div class="thumb-item">
<a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>
</div> …我知道很多类似的问题也在Stackoverflow中.这是一个Jquery问题.我添加了toggle类Jquery函数,并且当单击body上的任何位置时应该删除相同的类.它现在正在工作,但是当我们点击输入文本字段内部时,我不需要切换该类.
码:
var removeClass = true;
$(".btn-search").click(function() {
$(".input-search").toggleClass('expanded');
removeClass = false;
});
$("html").click(function() {
if (removeClass) {
$(".input-search").removeClass('expanded');
}
removeClass = true;
});body {
background: #eee;
}
.col-search {
padding: 13px 8px 8px 0;
position: relative;
width: 80%;
}
.input-search {
width: 220px;
height: 34px;
max-width: 0;
padding: 5px 10px;
transition: all .2s ease;
position: absolute;
top: 13px;
bottom: 13px;
right: 46px;
border: 0;
box-sizing: border-box;
opacity: 0;
}
.input-search.expanded {
max-width: 220px;
opacity: 1;
}
.btn-search { …我已经使用带有信息窗口的谷歌地图自定义标记。我需要添加功能以在用户单击特定按钮时打开信息窗口。有多个具有不同内容的标记。在这里，我找到了一个通过单击按钮打开单个信息窗口的解决方案： https: //stackoverflow.com/a/18334899/6191987
我已尝试使用上述解决方案，但我不知道如何定位在单击按钮时打开每个特定的信息窗口。
这是我尝试过的代码：
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.btns {
display: inline-block;
width: 100%;
margin-bottom: 20px
}
.btns a {
display: block;
padding: 10px;
float: left;
background: #eee;
margin-right: 5px;
text-decoration: none;
}<div class="btns">
<a href="#" onclick="myClick(0);">Open Info Window 1</a>
<a href="#" onclick="myClick(0);">Open Info Window 2</a>
<a href="#" onclick="myClick(0);">Open Info Window 3</a>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), …我有一个按钮toggleClass和setTimeout功能,目前它基于书面脚本工作,但我不需要第一次点击延迟.快速隐藏div并显示延迟.现在两个延迟时间都是一样的.谁能帮忙!
$(document).ready(function() {
$(".button").click(function() {
window.setTimeout(function() {
$(".search").toggleClass("hide");
}, 250);
});
});.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>html ×9
css ×7
javascript ×7
jquery ×6
google-maps ×1
input ×1
node.js ×1
owl-carousel ×1
reactjs ×1