小编Jer*_*emy的帖子
获得投影以进一步传播
我想让我的徽标发光一点.为此,我正在使用-webkit-filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.8).问题是大多数浏览器不支持传播的第4个值.那么如何在drop-shadow没有价差的情况下获得更大的价值呢？
img {
height: auto;
width: 200px;
margin-right: 2vw;
animation: logo-glow 2s infinite alternate-reverse;
}
@keyframes logo-glow{
0% {
-webkit-filter: drop-shadow(0 0 15px rgba(255, 3, 17, 0.8));
}
100% {
-webkit-filter: drop-shadow(0px 0px 1px rgba(64, 4, 0, 0.87));
}
}<img src="http://www.tdcdkhd.com/wp-content/uploads/2018/03/logo.png">这是我要在我的网页上使用的图片:
推荐指数
解决办法
查看次数
在font-awesome(v5)图标周围添加边框
这篇帖子之前已经提出过这个问题.但我不认为它仍然使用新的字体 - 真棒,因为他们使用svg和path元素.
我希望它围绕图标而不是圆圈.
我试过这个
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
还有这个:
text-shadow: 0px 0px 3px #000;
还有这个:
fa-border
办法
.fa-female, .fa-music{
color: #BBB;
}
.fa-female{
-webkit-text-fill-color: #BBB;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke:4px #00FF00;
}
.fa-music{
text-shadow: 0px 0px 3px #00FF00;
}<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Female Icon -->
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
<i class="fas fa-circle"></i>
<i class="fas fa-female fa-inverse" data-fa-transform="shrink-6 fa-border"></i>
</span>
<!-- Music Icon -->
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, …推荐指数
解决办法
查看次数
位置粘不与身体一起工作{overflow-x:hidden; }
我正在尝试使用bootstrap的粘性标头.但是当我添加body {overflow-x: hidden; }它时它停止了工作.
现在我在不同的页面上看到position: sticky,它的父母overflow设置了其他visible不显示的东西,是(或者是)常见的问题.但所有的帖子都像1岁.喜欢这篇文章:" 位置粘滞溢出-x为父div设置 "
现在有解决方案吗？由于bootstrap 4开始使用它,我认为它现在更受支持.
$('button').click(function() {
if($('body').css('overflow-x') !== "hidden"){
$('body').css('overflow-x', 'hidden');
} else {
$('body').css('overflow-x', 'unset');
}
});h1 {
top: 50px;
width: 100vw;
text-align: center;
position: absolute;
}
span{
font-size: 15px;
}
button{
position: fixed;
right: 20px;
top: 10px;
z-index: 10;
}
nav {
position: sticky;
top: 0;
height: 40px;
background-color: green;
margin-top: calc(100vh - 40px);
}
nav ul li {
float: left;
list-style-type: none; …推荐指数
解决办法
查看次数
字体很棒 <svg> 大小
所以我想用图标制作这个圆圈，对于图标，我想使用很棒的字体。对于圆圈，我使用填充技巧，因此圆圈始终是圆圈而不是椭圆。
图标变得太大，移除时图标box-sizing: border-box太小。
我认为这padding-top: 20%;是问题的原因，但我不知道如何解决这个问题。
svg{
width: 20% !important;
padding-top: 20%;
margin-right: 20%;
border-radius: 100%;
background-color: #ec567c;
float: left;
box-sizing: border-box;
}
svg:last-of-type{
margin-right: 0;
}<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>如果你拿走box-sizing: border-box;图标会在圆圈中，但它们会变小。
推荐指数
解决办法
查看次数
链接不可点击，因为 ::Before 和 ::After
我想在某些内容周围实现一个（我认为）很棒的绘图边框，但这需要使用::before和::after。这使我的内容元素内的链接无法使用。
在这里，我成功地重现了我正在谈论的问题。您可以看到由于::before和，该链接不再可点击::after。当我删除它时可以点击但我想保留我的边框。
.text::before, .text::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}<div class="text">
<h1>Text</h1>
<p>Lorem Ipsum 123</p>
<a href="https://stackoverflow.com">Link</a>
</div>对于想要查看边框的人（也许没有::after和也可以::before。我的网站是www.tdcdkhd.com。我正在谈论的边框/内容是主页幻灯片横幅中的内容.
推荐指数
解决办法
查看次数
更改父母背景颜色的div颜色
我正在尝试根据其背景颜色更改多维数据集。我希望这可以通过为元素提供一些透明背景和过滤器来反转其父背景的颜色来实现。但是，当然，它只是颠倒了自己的颜色。
在此示例中，它通过告诉javascript background-color在（例如）处进行更改来与javascript一起使用document.height()。但是我也希望它在图像上显示时反转颜色。
有没有办法做到这一点？有了:hover您可以做的事情像.section1:hover cube{ ... }这样，也许有伪元素:overlaying吗？
.cube{
position: fixed;
height: 50px;
width: 50px;
left: calc( 50vw - 25px );
bottom: 50px;
background-color: RGBA(255,255,255, .2);
-webkit-filter: invert(100%);
filter: invert(100%);
}
.section{
height: 600px;
width: 100vw;
}
.section1{
background-color: #AAAAFF;
}
.section2{
background-color: #FFAAAA;
}
.section3{
background-color: #AAFFAA;
}<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="cube"></div>推荐指数
解决办法
查看次数