小编Sou*_*ste的帖子
使CSS伪元素:在与主元素相同的高度之前
我一直在寻找并且未能自己找到解决方案.我正在尝试创建一个基本的可满足代码编辑器,对于行号,我选择在CSS伪元素中使用计数器设置的每一行使用段落.这是小提琴:http://jsfiddle.net/zppb29jw/
问题是,如果段落有点长,文本的其余部分将在我的计数器伪元素下面.我想拉伸:在计数器之前与段落的高度相同.
我已尝试使用position:relative段落和position:absolute; height:100%p:之前的伪元素,如下所述:伪元素如何检测非伪元素的高度？
这在我的情况下不起作用,因为我不希望p:before元素覆盖并覆盖段落,我只想要与现在相同的行为,只是希望p:before元素在与main相同的高度上拉伸p.
我也不希望线条拉伸超过包装容器的宽度.我一直在尝试很多方法,但未能找到解决方案.
推荐指数
解决办法
查看次数
Make intersecting circle area dark
I have two circles that intersect and I want to make the intersecting area have a color, even when the two circles are transparent. I thought I could find some way to do this with css mix-blend-mode property but I have had no success with it.
Of course, I could make the circles have color and decrease their opacity, but I want them to be either white or transparent, where only the overlapped area gets background color.
我希望相交区域能够动态更改，因为鼠标将跟随一个圆圈。这是代码库。 …
推荐指数
解决办法
查看次数
html2canvas 不适用于伪元素
我正在尝试使用html2canvasusing截取屏幕截图ionicframework。除了我有:before. 如
CSS
.e_amount::before{
content: "$";
}
在截取屏幕截图之前，它看起来像这样：
在html2canvas 代码之后：
注意到美元符号 ($) 与 10.00 不一致。
我试过在头部包含样式，但仍然无法正常工作。我错过了什么？
JS
html2canvas(document.getElementById('card'), {
onrendered: function(canvas) {
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
var message = {
text: "QR Generated",
image: "file://"+msg
};
window.socialmessage.send(message);
},
function(err){
console.log(err);
},
canvas
);
}
});
html
<div class="list card" id="card">
<div class="item item-body">
<div class="row" style="margin-bottom: 5px; border-bottom: 1px solid #ddd;">
<style>.e_amount::before{content:'$' !important;}</style>
<div class="col bold">{{"amount" | translate}}</div>
<div class="col e_amount"></div> …推荐指数
解决办法
查看次数
如何淡化背景滤镜模糊的边缘
我想淡化具有透明背景的元素的边缘backdrop-filter: blur()。
通常，当使用背景滤镜时，边缘清晰而笔直。
所以基本上，我想要更少的边缘模糊。
.blur,
.behind-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blur {
backdrop-filter: blur(1px);
}
.behind-blur {
width: 100px;
}<div class="behind-blur">le le le le le le le le le le le le le le le le le le le le le le le le</div>
<div class="blur">la la la la la</div>推荐指数
解决办法
查看次数
在html中更改子元素onclick父元素的颜色
在给定的代码段中，我给出了代码，并且期望结果是，当再次单击父div时，默认颜色应应用于子元素。但条件是代码应尽可能少。
需要没有.toggleclass，.toggle，.addclass，.removeclass的解决方案（如果可能）。
谢谢。
*编辑非常感谢大家的宝贵回答。我很感激。座右铭=>改善您的知识库。
$('li').click(function() {
$(this).children().css({
"color": "red",
"border": "2px solid red"
});
}).ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
</script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
<li>li (direct parent)
<span>span</span>
</li>
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>推荐指数
解决办法
查看次数