小编Tem*_*fif的帖子
fontawesome 5.x将颜色设置为图标
我无法使用这些代码着色font-awesome5图标.我尝试了"填充"css属性来设置颜色,但它没有用.
HTML代码:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS代码:
.icons i {
color: #2759AE;
}
推荐指数
解决办法
查看次数
为什么我的Grid元素的高度没有正确计算？
我遇到了CSS网格元素的高度问题.我使用的代码是:
.gridContainer {
border: thin solid black;
background: rgba(255, 0, 0, 0.5);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100px;
height: 100px;
grid-template-areas: 'windowContentHolder';
}
.gridItem {
grid-area: windowContentHolder;
background: rgba(255, 255, 0, 0.5);
width: 200%;
height: 200%;
}
.content {
background: rgba(255, 0, 0, 0.5);
}<div class="gridContainer">
<div class="gridItem">
<div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>
</div>
</div>如您所见,gridItem设置为height:200%,预期结果不符合预期.它应该是200px父(100px)的两倍(),滚动条隐藏任何额外的高度,而高度属性似乎根本没有设置.
似乎百分比正在考虑子高度而不是父高度,因为如果我们仔细检查元素,我们将看到它的高度是子元素高度的两倍.
带有'hi'的元素没有像预期的那样溢出.更改gridContainer为'block'确实可以正常工作,但不能使用'grid':
.gridContainer {
border: thin solid black;
background: rgba(255, 0, …推荐指数
解决办法
查看次数
css calc - 向下舍入两个小数的情况
我有以下情况:
div {
width: calc((100% / 11) - 9.09px);
}
在上下文中,100% = 1440px,并且在数学中使用sass生成9.09px.
结果是:94.55px,因为calc函数向上舍入,但我需要94.54px(向下舍入).
我怎样才能向下舍入到最接近的百分位？
#Edit:示例.
推荐指数
解决办法
查看次数
变换比例对于奇数像素宽度不正确
我试图缩放div,但保持内部元素在相同的位置和相同的大小.为此,我使用transform: scale(value)包装器和transform: scale(1/value)内部div.
问题是,当我改变比例时,内部div会发生变化.只有当包装纸的宽度/高度为奇数或不是整数时才会发生这种情况.对于包装器的均匀宽度/高度不会发生这种情况.
我的目标是让许多包装器的子元素与包装器一起缩放,但只有一个不包装.
看看这个例子,看看行动中的问题(悬停到比例).
示例没有问题,内部元素保持固定(容器的高度和宽度均匀):
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>有问题的例子,内部元素在比例上移动一点(容器的高度和宽度是奇数):
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: …推荐指数
解决办法
查看次数
可以用css表示递归变量吗？
对于html:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
有没有办法创建一个使用其父值的递归变量:
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
以上内容无效,因为css变量不能具有依赖循环.另一个无效的例子
body > div {
--is-even: 0;
--is-odd: 1;
}
div {
--is-even: var(--is-odd);
--is-odd: var(--is-even);
}
是否有任何间接方式在css中表达这样的递归变量？
推荐指数
解决办法
查看次数
圆形DIV方面
我一直试图用不均匀的圆形边做DIV,如下所示:
我已经检查了一些解决方案,我可以通过使用border-radius获得最接近的解决方案.我用过:
border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px;
这就是我所拥有的:
如何才能做到这一点？
推荐指数
解决办法
查看次数
纯CSS倒计时动画
我正在尝试做一个纯HTML/CSS倒计时动画,但我很难让它顺利运行.现在我只是在几分钟和几秒钟之内.请注意,我正在使用animation-delay属性将我的倒计时重置为某个初始时间.
现在一切正常,除了对应于x10分钟的数字,它没有改变与其余数字的同步.下面我将粘贴我的代码和两个codepens,第一个正常版本具有正常行为的正确时间,另一个正常版本快10倍,因此您可以快速了解问题.
@keyframes tick6 {
0% { margin-top: 0; }
16% { margin-top: -2rem; }
33% { margin-top: -4rem; }
50% { margin-top: -6rem; }
66% { margin-top: -8rem; }
83% { margin-top: -10rem; }
100% { margin-top: -12rem; }
}
@keyframes tick10 {
0% { margin-top: 0; }
10% { margin-top: -2rem; }
20% { margin-top: -4rem; }
30% { margin-top: -6rem; }
40% { margin-top: -8rem; }
50% { margin-top: -10rem; } …推荐指数
解决办法
查看次数
`all: unset` 和 `all: revert' 之间有什么区别
根据 MDN：
在许多情况下，revert 关键字的作用与 unset 完全相同。唯一的区别是具有由浏览器或由用户创建的自定义样式表（在浏览器端设置）设置的值的属性。
我不了解浏览器和自定义样式表。浏览器和自定义样式表都可以替换all: unset，对吗？
推荐指数
解决办法
查看次数
Prefer shrinking over growing in a flex container with flex-flow: row wrap
Displaying an image gallery of different sized images and ratio with the following specs:
- No blanks (margins) between images.
- Respecting the original ratio as much as possible.
- Images surrounded by a link.
- Non-JS solution.
- Images could be cropped a bit.
- Portable solution.
- Set of images displayed is random.
- Images must be displayed from left to right (prevents using columns).
I achieved that with the following flexbox solution:
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
section a { …推荐指数
解决办法
查看次数
如何在纯 CSS 中禁用提交按钮和点击链接？
我挑战自己只用 HTML 和 CSS（无 Javascript）创建视觉动态和交互体验。到目前为止，我还没有遇到任何我需要的功能，而我在纯 CSS 和 HTML 中无法做到。这个可能有点难度。
我需要防止用户双击<a>,<input type="submit">和<button>标签。这是为了防止他们重复提交表单或不小心向 URL 发出 2 个 GET 请求。这如何在纯 CSS 中完成？就算disabled没有JS我们也设置不了，2020年这里应该有一些遮罩技术或者样式组合可以处理。
这是一个简单的尝试示例：
.clicky:focus{
display: none;
pointer-events: none;
}<a href="#down" class="clicky">test</a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p id="down">target</p>不幸的是，这会在出于某种原因触发实际点击事件之前禁用它。也许锚不是最好的测试方式？我会继续做进一步的尝试。
推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×6
css3 ×3
css-calc ×1
css-grid ×1
css-shapes ×1
flexbox ×1
font-awesome ×1
keyframe ×1
sass ×1