文章标签

一方面，用 CSS 创建简单的棋盘格背景很容易。另一方面，除非我们是 CSS-gradient-ninjas 中的一员，否则我们只能使用基本图案。

至少当我盯着...的时候，我是这么想的。

不久前，Geoff 写了一篇关于酷炫悬停效果的文章 。 该效果依赖于 CSS 伪元素、变换和过渡的组合。很多评论表明，可以使用背景来实现相同的效果...

浏览 Dribbble 或 Behance，您会发现设计师使用一种简单的技术为图像添加纹理：噪声。添加噪声会使原本纯色或平滑的渐变（如阴影）更逼真。但尽管设计师偏爱纹理，...

来自 Kirupa Chinnathambi 的一个正宗 CSS 技巧。要使彩色阴影与元素的 background-image 中的颜色相匹配，您需要在伪元素中继承背景，将其放在原始元素后面，然后模糊并过滤它。...

在本周的综述中，prefers-contrast 在 Safari 中上线，MathML 受到了一些关注，:is() 实际上非常宽容，更多与 ADA 相关的诉讼，CSS 背景属性的不一致初始值会导致不希望出现但很酷的模式...

您可以在 CSS 中创建条纹。很长一段时间，我对 CSS 背景图案的理解仅限于此。条纹并没有什么错，条纹很酷。它们可以定制成宽窄不一的带状，交叉...

CSS 自定义属性的一件很酷的事情是，它们可以成为值的一部分。假设您正在使用多个背景 来实现设计。每个背景将有自己的颜色、图像、重复、位置等。它...

您知道如何拥有多个背景 吗？

body {
  background-image: 
    url(image-one.jpg),
    url(image-two.jpg);
}

这仅仅是 background-image。您可以像预期的那样设置它们的位置。我们将简写它

body {
  background: 
    url(image-one.jpg) no-repeat top right,
    url(image-two.jpg) 

假设您想在鼠标悬停在元素上时移动元素的 background-position，为设计增添一些趣味。您有一个这样的元素

<div class="module" id="module"></div>

您在其上添加一个背景

.module