CSS英文单词汇总(PHP新手收藏)

英语不好,并不会影响PHP的学习,因为PHP常用英文也就那么几个。在之前的文章《HTML英文单词汇总(PHP新手收藏)》中介绍了学PHP涉及的所有HTML英文单词,下面先给大家分享一下学PHP涉及的所有CSS英文单词。

我的英语不好可以学PHP吗?会不会学起来很困难?相信这是摆在很多想学PHP编程但英语不好的人面前的困惑。简单来说,英语不好,并不会影响PHP的学习,因为PHP常用英文也就那么几个部分:HTML、CSS、JavaScriptphp、mysql等。

在之前的文章《HTML英文单词汇总(PHP新手收藏)》中介绍了学PHP涉及的所有HTML英文单词,下面先给大家分享一下学PHP涉及的所有CSS英文单词,其他部分在后面的系列文章中慢慢分享。

学PHP涉及的所有CSS英文单词

CSS(cascading style sheet):层叠样式表

a:active 单击鼠标左键

italic:倾斜

word-spacing:单词和单词之间的距离

underline:下划线

Font-size:文字的大小

Background-color:背景颜色

Background-attachment :背景附件

attachment:附件,附属物

Border-top-style:上边框的线型

Border-top-color:上边框的颜色

clear:清除浮动,明白的; 清晰的

overflow:溢出

normal:正常

id:标识符

Font-family:字体

letter-spacing:字母和字母之间的距离

Line-through :删除线

text-indent:首行缩进

Background-image:背景图片

scroll:滚动

List-style-type:列表样式

solid:实线 实心的

border-collapse:collapse; 合并表格的边框

float:浮动 (使)漂浮; 自由浮动

static:静态 静止的

Import:输入; 进口

Class:类

Font-style:文字是否倾斜

overline:上划线)

line-height:行高

Background-repeat:背景图片是否平铺

Repeat:重复; 复述

List:列表

dashed:虚线

collapse:折叠

display:显示

fixed:固定 不变的

Link:链接

A:Visited 访问过的

Font-weight:文字加粗方式

text-align:文本的水平对齐方法

Background:背景; 底色

Background-position:背景图片的定位

position:位置,方位;

none:无 没有一个

padding:填充

inline:内联

absolute:绝对的

stylesheet

a:hover 鼠标移上链接上

repeat-x:横向平铺

Text-decoration:文本修饰线

bold:加粗

repeat-y:纵向平铺

no-repeat:不平铺

Border-top-width:上边框的宽度

dotted:点状线

margin:外边距 边缘,范围

block:块

relative:相对

英语不好也可以学PHP,学PHP涉及的所有英文单词:

《HTML英文单词汇总(PHP新手收藏)》

《CSS英文单词汇总(PHP新手收藏)》

《JavaScript英文单词汇总(PHP新手收藏)》

《PHP英文单词汇总(PHP新手收藏)》

《MySQL英文单词汇总(PHP新手收藏)》

【相关推荐:css视频教程、web前端、PHP视频教程】

看看图片马赛克风格化效果用CSS怎么实现?

用CSS怎么给图片加马赛克?下面本篇文章给大家分享一下巧用 CSS 把图片马赛克风格化的方法,希望对大家有所帮助!

CSS英文单词汇总(PHP新手收藏)

前端(vue)入门到精通课程:进入学习

一、image-rendering 介绍

CSS 中有一个有趣的特性叫 image-rendering,它可以通过算法来更好地显示被缩放的图片。(推荐学习:css视频教程)

假设我们有一张尺寸较小的二维码截图(下方左,仅为示意图不可扫),将其放大 10 倍后图像会被虚化(下方右):

CSS英文单词汇总(PHP新手收藏)

这时给放大的图片加上 image-rendering: pixelated 的特性,CSS 会通过算法将其像素化展示,使其图像轮廓具有更锐利的边缘:

CSS英文单词汇总(PHP新手收藏)

该特性非常适合应用在色彩单一、轮廓分明、需要被放大的图片上,可以营造出一种伪矢量的既视感(减少放大后的失真)。

对于色彩丰富、细节较多的照片,image-rendering: pixelated 使用后会营造出一种马赛克的外观:

CSS英文单词汇总(PHP新手收藏)

这离本文标题所希望实现的马赛克效果还有段距离 —— 目前图片需要被放大后才能显示出效果,而我们希望能在保有原图尺寸的基础上,给图片覆盖等尺寸马赛克。

然而 image-rendering 特性对尺寸未发生缩放的元素是不会生效的:

MDN – This property has no effect on non-scaled images.

二、踩坑等尺寸马赛克的实现

等尺寸马赛克的原理相当于先把一张照片模糊化,然后再经过锐化算法处理得到各种小方格。

image-rendering: pixelated 帮我们实现了“锐化”的步骤,我们得想想怎么实现“模糊”。

首先使用滤镜的模糊方案是行不通的,因为 image-rendering 和图像缩放系数强相关,所以应当思考可以怎样利用图片的缩放能力。

这里得说一句,WEB 上的图片像极了 Photoshop 里的智能对象 —— 你可以任意修改它的尺寸(例如放大很多倍让其变模糊),但最后再把图片改回原本的大小时,图片会变回原来的样子(没有任何失真)。

如何保留图片放大后的“模糊”信息,是优先需要解决的问题。

聪明的小伙伴已经想到了可以尝试使用 canvas 来处理,毕竟 canvas 可以轻松获取、绘制图像,且绘制出来的图像信息是纯数据的,而非图形对象(Image),故经其放大绘制的图片数据再进行缩小绘制(到原尺寸)会失真(这正好是我们所希望发生的)。

但这里也存在一些坑:

  • 外部图像通过 image-rendering: pixelated 算法处理后显示的信息,canvas 是无法拿到的,因为那是显示层的东西。canvas 拿到的依旧是未经锐化的、模糊的原生图像内容;
  • canvas 本身如果没有缩放的话,给 canvas 添加 image-rendering: pixelated 没有任何意义。

这意味着你无法把图片在 canvas 外面放大锐化,然后再写入 canvas 去缩小绘制(并不断迭代处理)来得到锐化后的原尺寸图片。

三、有趣的 canvas 拉伸

在解决上述问题时,我们先来看看 canvas 一个有趣的特性。

如果我们在 canvas 标签里定义了宽高:

<canvas width="100" height="50" ></canvas>

同时又给 canvas 在样式中定义了另一个宽高:

canvas {
width: 200px;
height: 200px;
}

那么 canvas 会以哪个尺寸来显示呢?

答案是以 CSS 的尺寸来显示,但画布的内容尺寸会以画布标签内定义的宽高为准。这意味着虽然我们看到的是 200px * 200px 的画布,但它的内容实际被拉伸了(宽被拉伸了 2 倍,高被拉伸了 4 倍)。

CSS英文单词汇总(PHP新手收藏)

注:左边为画布,右边为原图

这也是 canvas 作为可替换元素的一个特性 —— CSS 无法修改其内容。试想一下,如果 CSS 可以动态地修改 canvas 内容的尺寸,意味着 canvas 的内容会被裁剪掉一部分,或者多出来一部分空白区域,这显然是不可取的。所以 canvas 在保留内容完整的前提下,整体伸缩到样式规定尺寸,是合理的浏览器行为。

利用 canvas 的这个特性,我们可以这样来实现等尺寸马赛克:

  • 创建一个画布,通过样式规定好其宽高,并设置 image-rendering: pixelated 特性;
  • 计算图片最佳展示尺寸(以类似 background-size: contain 的形式展示);
  • 将画布的宽高(非样式)设置为样式宽高的 1/N;
  • 绘制图像,绘制的图像宽高为最佳展示尺寸的 1/N。

如此一来,我们实际绘制了一个尺寸仅为最佳尺寸 1/N 的图像,再通过 canvas 的 N 倍放大又变回了视觉上的最佳尺寸。图像因为走的 canvas 绘制,所以放大回最佳尺寸后会保持模糊,从而满足了 image-rendering 的匹配需求。

注:这里提到的“最佳尺寸”,指的是步骤 2 里“确保完整展示图像”所对应的最佳尺寸,而非图片原生尺寸。

四、代码实现

我们按照上方步骤来书写对应代码,当然我们希望灵活一些,例如上述的 N 可以由用户自定义。另外本章的代码可以在 Github 上获取。

4.1 HTML 部分

主要为选择图片的 <input> 控件、画布、方便画布获取图像的 <img>、供用户自定义缩放倍数的文本框、执行按钮:

<input id="file" type="file" accept="image/*" />
<canvas id="canvas"></canvas>
<img id="img-raw" />
<label for="compress-times">压缩倍数:</label>
<input id="compress-times" type="number" value="12">
<button>马赛克化</button>

4.2 CSS 部分

我们需要通过样式规定好画布的外观尺寸,并配置 image-rendering: pixelated 特性。另外 <img> 标签只是一个传递用户所选图片到画布的中介,可以直接隐藏:

canvas {
display: block;
border: gray solid 1px;
width: 600px;
height: 600px;
image-rendering: pixelated;
}

img {
display: none;
}

4.3 JS 部分

let imgBlobUrl;
const file = document.getElementById('file');
const img = document.getElementById('img-raw');
const compressTimes = document.getElementById('compress-times');
const defaultCompressTimes = compressTimes.value | 0;
const canvas = document.getElementById('canvas');
const button = document.querySelector('button');

const boundingRect = canvas.getBoundingClientRect();
const ctx = canvas.getContext('2d');
const canvas_w = boundingRect.width;
const canvas_h = boundingRect.height;

// 以 background-size: contain 形式设置图片尺寸
function matchImgSizeToCanvas(imgElem = img) {
let w = imgElem.width;
let h = imgElem.height;
if (w > canvas_w || h > canvas_h) {
let radio = Math.max(h / canvas_h, w / canvas_w);
radio = Number(radio.toFixed(2));
imgElem.width = parseInt(w / radio);
imgElem.height = parseInt(h / radio);
}
}

// 绘制 1/N 大小的图像,画布宽高属性设为样式宽高的 1/N,从而实现画布内容的 N 倍放大
function run() {
let ct = parseInt(compressTimes.value) || defaultCompressTimes;
canvas.width = parseInt(canvas_w / ct);
canvas.height = parseInt(canvas_h / ct);
ctx.drawImage(img, 0, 0, parseInt(img.width / ct), parseInt(img.height / ct));
}

function cleanCanvas() {
ctx.clearRect(0, 0, canvas_w, canvas_h);
}

function reset() {
img.removeAttribute('width');
img.removeAttribute('height');
cleanCanvas();
matchImgSizeToCanvas(img);
run();
}

file.addEventListener('change', function (e) {
window.URL.revokeObjectURL(imgBlobUrl);
const picFile = this.files[0];
imgBlobUrl = window.URL.createObjectURL(picFile);
img.onload = function init() {
reset();
}
img.src = imgBlobUrl;
}, false);

button.addEventListener('click', reset, false);

执行效果:

CSS英文单词汇总(PHP新手收藏)

选中文件/点击按钮后,能按压缩倍数得到对应的像素风格艺术照。

五、Mosaic 插件封装

通过上方示例我们学习了如何利用 canvas 特性来设计等尺寸的马赛克效果,现在我们尝试把该功能封装为一个简易插件,可以让页面上的图片列表一键 Mosaicing。

插件的实现方案也很简单 —— 用户点击按钮时,往图片容器上插入一个和容器等尺寸的画布(尺寸通过样式设置),再绘制覆盖画布的图像,并缩小画布的宽高属性来放大画布内容:

5.1 插件脚本

/** @file mosaic.js **/

class Mosaic {
constructor(url, container, options = {}) {
if (typeof container === 'string') {
container = document.querySelector(container);
}

if (!url || !container?.style) {
console.error('参数不正确');
}

this.url = url;
this.options = options;
this.container = container;

this.init();
}
init() {
const img = new Image();
const canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.zIndex = 999;
canvas.style.imageRendering = 'pixelated';
this.img = img;
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
const containerBoundingRect = this.container.getBoundingClientRect();
const container_w = containerBoundingRect.width;
const container_h = containerBoundingRect.height;

// 通过样式初始化画布尺寸为容器尺寸
canvas.style.width = container_w + 'px';
canvas.style.height = container_h + 'px';

img.onload = () => {
this.run(container_w, container_h);
}

img.src = this.url;
}
run(w, h) {
// 缩小倍数,可以由参数传入,默认为 12
const compressTimes = parseInt(this.options.compressTimes) || 12;
let compress_w = parseInt(w / compressTimes);
let compress_h = parseInt(h / compressTimes);
// 修改画布尺寸属性为 1/缩小倍数
this.canvas.width = compress_w;
this.canvas.height = compress_h;
// 绘制图片覆盖缩小后的画布
this.ctx.drawImage(this.img, 0, 0, compress_w, compress_h);
this.container.prepend(this.canvas);
this.img = null;
}
remove() {
this.container.removeChild(this.canvas);
this.canvas = null;
}
}

export default Mosaic;

5.2 插件使用页

/** @file plugin-demo.html **/
<head>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
float: left;
line-height: 0;
margin: 0 20px 20px 0;
}

li>img {
max-height: 180px;
}

div {
display: block;
clear: both;
}
</style>
</head>

<body>
<ul>
<li><img src="./assert/0.png" /></li>
<li><img src="./assert/1.png" /></li>
<li><img src="./assert/2.png" /></li>
<li><img src="./assert/3.png" /></li>
</ul>
<div>
<button id="generate">铺上马赛克</button>
<button id="remove">移除马赛克</button>
</div>

<script type="module">
import Mosaic from './mosaic.js';

let liElems = document.querySelectorAll('li');
let mosaicList = [];

document.querySelector('#generate').onclick = () => {
remove();
for (let i = 0; i < liElems.length; i++) {
let liElem = liElems[i];
let url = liElem.querySelector('img').src;
let mosaic = new Mosaic(url, liElem);
mosaicList.push(mosaic);
}
}

function remove() {
mosaicList.forEach((mosaic) => {
mosaic.remove();
});
mosaicList.length = 0;
}

document.querySelector('#remove').onclick = remove;

</script>
</body>

执行效果:

CSS英文单词汇总(PHP新手收藏)

点击“铺上”或“移除”按钮,可以轻松实现/移除列表上各图片的像素风格化。

六、兼容性

image-rendering 的兼容性可以从 caniuse 上查到,目前覆盖率如下:

CSS英文单词汇总(PHP新手收藏)

影响较大的主要还是在 IE、UC,以及安卓 4.4.4 版本的浏览器,需要酌情考虑是否在产品上使用此 CSS 特性。

以上便是本文全部内容,相关代码可以在 Github 上获取(地址:https://github.com/VaJoy/BlogDemo3/tree/main/220226-pixelated)。

希望能令你有所收获,共勉~

(学习视频分享:web前端入门教程)

以上就是看看图片马赛克风格化效果用CSS怎么实现?的详细内容,更多请关注钦钦技术栈其它相关文章!

转载至:php中文网【www.php.cn】

版权声明:本文(即:原文链接:https://www.qin1qin.com/catagory/24450/)内容由互联网用户自发投稿贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 630367839@qq.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年9月21日 下午3:03
下一篇 2022年9月21日 下午3:03
软件定制开发公司

相关阅读

发表回复

登录后才能评论
通知:禁止投稿所有关于虚拟货币,币圈类相关文章,发现立即永久封锁账户ID!