小编Le_*_*___的帖子
没有@media查询或javascript的小屏幕上更大的字体？
@media查询是否有替代方法可以实现与屏幕大小成反比的字体大小？(例如:相反的效果2vw,在小屏幕上字体变小);
我的第一次尝试是除以视口宽度增量的值,但font-size: calc(10vw / 2);工作的,而font-size: calc(100 / 2vw);不幸的是没有工作.
推荐指数
解决办法
查看次数
是否有仅使用CSS(纯CSS)的解决方法,以使用display:none在对象上应用淡入和淡出？
我知道使用jQuery可以轻松实现效果hide().这里的目标是用纯CSS代替它.淡出结果必须具有占用页面布局上的零空间(因此display:none元素visibility:hidden不是一个选项).
我display:none用一块animation代替的方法在对象上使用纯CSS制作了淡入效果transition,但是如果不使用javascript setTimeout方法我无法使其淡出效果.
这是我到目前为止所得到的:
function aaa(){
document.getElementById("b").style.display = "inline-block";
}
function bbb(){
setTimeout(function(){ document.getElementById("b").style.display = "none"; }, 1000);
}#b {
display: none;
opacity: 0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
background: skyblue;
}
#a:hover ~ #b {
opacity: 1;
-webkit-animation: animate 1s; /* Chrome, Safari, Opera */
animation: animate 1s;
}
@keyframes animate {
0% {opacity: 0;}
100% {opacity: 1;}
} …推荐指数
解决办法
查看次数
元视口标记中"初始比例"的最小值是多少？
在尝试使用meta viewport标签时,我注意到初始比例小于0.25的任何值都被视为0.25.例如以下所有内容
<meta name="viewport" content="width=device-width, initial-scale=0.25">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<meta name="viewport" content="width=device-width, initial-scale=0.01">
<meta name="viewport" content="width=device-width, initial-scale= ">
渲染页面相同.所以,
- 元视口标记0.25中允许的最小值是"初始比例"吗？
- 初始规模的默认值是多少？
- 当初始比例为空白时,为什么初始比例不采用默认值而不采用0.25
initial-scale=？
推荐指数
解决办法
查看次数
浏览器中的 CSS 错误：使用伪时“未知属性名称”：after
尝试设置伪 .css 的 css 属性时，我在 Chrome 和资源管理器中收到以下错误:after。（我正在尝试设置一个汉堡导航图标并为其设置样式）
我收到错误：
'未知的属性名称'
当我设置width，height，background等伪:after。这是在 Chrome 中：
给我错误的代码：
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
完整的 HTML 代码
<html>
<head>
<title>Delivery Motion!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-3.0.0.min.js"></script>
<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is …推荐指数
解决办法
查看次数
重叠的圆圈流血
我有一个position:relative带有position:absolute红色克隆的绿色环:before和覆盖它们的position:absolute白色克隆:after(因为它们位于同一个地方并具有相同的大小).
问题是:它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让绿色环overflow:hidden部分修复除去外部流血的问题; 但内部出血边界仍然存在.
为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？
body {
background: lavender;
}
#ring {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 50px solid green;
}
#ring:before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 100px;
height: 100px;
border: 50px solid red;
border-radius: 50%;
}
#ring:after {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 50px solid …推荐指数
解决办法
查看次数
当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时，Alpha 变为黑色
我正在使用此处的代码将剪贴板中的图像粘贴到页面上。它适用于所有浏览器（Chrome、Firefox、Edge 和 Opera）。
问题是：当图像是带有 alpha 通道（透明区域）的 PNG 或 GIF 时，alpha 在 Firefox 和 Edge 中变为黑色。
这是代码片段（如果您愿意，也可以使用 jsfiddle）：
document.getElementById('pasteArea').onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load …推荐指数
解决办法
查看次数
宽度减小时增加高度(高度反向Vw)
当宽度减小时,我一直在努力增加div的高度.这允许所有文本更好地适应而不流出.没有js可以实现这个目标吗？
width: 100%;
height: 29vw;
当宽度减小时,Vw会降低高度.(我需要完全相反的行为.宽度向下 - 高度上升)我尝试使用负vw来反转效果而没有运气.
谢谢!
推荐指数
解决办法
查看次数
SVG 路径中的字母“e”意味着什么？
根据MDN和W3schools，SVG 路径中可用的唯一字母（命令）为：M/m(moveto)、L/z(lineto)、H/h(horizontal lineto)、V/v(vertical lineto)、C/c( curveto)、S/s(平滑曲线)、Q/q(二次 B\xc3\xa9zier 曲线)、T/t(平滑二次 B\xc3\xa9zier 曲线)、A/a(椭圆弧) 和 Z/z(近距离路径）。
\n\n但我刚刚2.52e-4,1.13167在 Inkscape 上制作的 SVG 文件中发现了 \'e\' ( )，我需要知道它是什么意思。完整路径：
<path style="fill:#000000;stroke-width:0.25446901"\n d="m 83.846207,283.12668 c 15.992614,-15.1728 -2.513154,-76.38272 -19.662265,-19.85549 -2.686628,2.07836 -3.844405,3.79032 -3.843936,5.68391 2.52e-4,1.13167 1.271934,3.67458 2.424778,4.8488 29.290043,-6.79271 2.902502,8.1524 11.570816,9.81493 1.988533,0.34976 6.85716,0.0978 9.510607,-0.49215 z"\n id="path47"\n inkscape:connector-curvature="0"\n sodipodi:nodetypes="cccccc" />\nps：该代码是在 Inkscape 上制作的“跟踪位图”的结果
\n推荐指数
解决办法
查看次数
线之间不受欢迎的悬停间隙
我有一个装满小金色方块的容器.在:hover,它们变黑了.当鼠标在一个正方形上并转到左侧或右侧的下一个时,它可以正常工作.
问题是:当光标在一个正方形上并转到另一行的另一个正方形时,:hover效果上有一个间隙:一个区域,其中没有一个获得:hover属性.
当鼠标在容器行中垂直移动时,如何避免在悬停时闪烁,为什么会发生？
#container {
width: 200px;
height: 90px;
line-height: 10px;
position: relative;
}
#container span {
display: inline-block;
width: 10px;
height: 10px;
background: gold;
vertical-align: top;
}
#container span:hover {
background: black;
}
#container span:hover ~ span {
background: tomato;
}<div id=container>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>推荐指数
解决办法
查看次数
如何清除 :target 选择？
我有使用:target选择器的链接。单击时，相应的段落会突出显示。问题是：一旦单击，就无法清除选择。我希望当我再次单击所选项目时取消选中它。
例如：如果链接 1 被选中并且我再次单击它，那么它就会被取消选中。
body {
background: #fefefe;
}
:target {
background-color: #ccff66;
}<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>
<p id="link1">This is a text A</p>
<p id="link2">This is a text B</p>
<p id="link3">This is a text C</p>
<p id="link4">This is a text D</p>笔记
我在使用单选/复选框的解决方法中取得了成功，但我想知道是否可以使用
:target.它不是重复的：帖子上很清楚，这里的目标是通过第二次单击来取消选中某个项目，而不是单击第三个“橡皮擦”项目（该项目在当前场景中甚至不存在） ）。
推荐指数
解决办法
查看次数
隐藏父 div ，当里面没有子 div 时
如果父 div 不包含任何子 div，如何在父 div 上设置不显示（或添加 css 样式）？Child div 是由系统动态附加的，所以我们需要在 parent 上设置一个 css class，当里面没有 child 时。任何jquery想法？
推荐指数
解决办法
查看次数