前端开发 on 背字根

CSS解决图片缩放变模糊不清晰

Thu, 07 Apr 2022 09:30:32 +0800

位图在放大尺寸后都会变得模糊不清晰，但在网页中插入图片时，即使原图非常清晰，缩小尺寸后也可能变得模糊。

使用CSS的image-rendering属性，可以解决这一问题，使用前后对比如下图所示：

Mon, 04 Apr 2022 14:26:12 +0800

对于宽度小于父元素宽度的行内子元素，要实现水平居中，可以给父元素使用：

div {
	text-align: center;
}

小于父元素宽度的情况，如果已知子元素宽度，可以使用相对定位和负外边距方法：

div img {
	position: relative;
	left: 50%;
	margin-left: -130px; //元素宽度除以2
}

小于父元素宽度的情况，如果子元素宽度未知，可以将子元素设置为块级元素，再设置左右外边距为auto：

Sun, 18 Apr 2021 15:36:01 +0800

一般电脑默认96DPI或72DPI，JS可以通过以下方法获取DPI的值：

function get_dpi() {
 for (var i = 56; i < 2000; i++) {
 if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
 return i;
 }
 }
}

有了DPI值就可以计算出毫米与像素之间的等值：

1毫米=DPI/25.4

因为DPI为每英寸内的像素点数，1英寸=25.4mm，所以DPI除以25.4就是1毫米的像素数。

Sat, 28 Nov 2020 12:47:24 +0800

对于单行的文字截断，可以使用text-overflow: ellipsis属性来实现：

li {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

此时，溢出的文字会被省略号…代替。

多行文本的情况，例如博客文章摘要，在PC端和手机端需要显示不同数量的文字，那么则可以使用以下代码来控制显示行数：

Tue, 16 Jan 2018 21:21:32 +0800

Bootstrap4 Carousel轮播非常简单好用，默认左右滚动效果，但通常的需求是三种情况：左右滚动（水平滚动）、上下滚动（垂直滚动）、淡入淡出。

通过增加少量的CSS，就可以为Bootstrap4 Carousel轮播增加上下滚动（垂直滚动）、淡入淡出效果。

Sat, 11 Nov 2017 17:31:06 +0800

Unslider是一款轻量的jQuery轮播插件，简单好用，但默认不支持鼠标悬停时停止播放功能，这是一般轮播插件都支持的功能，像Unslider这样优秀的插件应该是支持的，然而我读了一下源码也没发现有可用的参数支持该功能。

Fri, 06 Oct 2017 12:06:41 +0800

通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。

如果不用考虑IE6/7，问题会非常简单，display: table-cell 可以将元素以表格单元格的形式呈现，那么垂直居中就不是问题了，现在我们的情况是要考虑IE6/7，display: table-cell 在IE6/7下行不通。

Wed, 05 Oct 2016 16:25:50 +0800

前面我发表了屏蔽网络运营商植入广告jQuery代码，但是有一个缺陷，广告仍然会显示一瞬间，虽然一眨眼的功夫就消失了，给人的感觉还是不很好。

所以，我写了一段CSS代码来屏蔽：

#colophon ~ * {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	overflow: hidden !important;
}

注意选择符，因为我网站每个页面的最后一元素ID都是colophon，如果你不确定你页面的最后一个元素是什么，可以在页脚模板（通常是footer.php、footer.tpl）的</body>前面添加一个空元素：

Wed, 05 Oct 2016 13:59:30 +0800

目前我网站没有挂任何广告，然而在移动端浏览时却发现时不时的在页脚出现一个悬浮广告，一开始就知道是网络运营商劫持植入的广告，但没理会。

昨晚闲来无事搜索了一下，发现有同样问题的用户还不少。

Tue, 04 Oct 2016 13:49:19 +0800

-webkit-appearance: none会清除WebKit引擎浏览器默认样式，有时会很有用，但使用这个样式后会导致checkbox复选框和radio单选框消失。

解决办法：

input[type="checkbox"] {
	-webkit-appearance: checkbox;
}
input[type="radio"] {
	-webkit-appearance: radio;
}

添加以上CSS即可解决-webkit-appearance导致checkbox复选框和radio单选框消失问题。