跳过至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机播放
搜索

文章标签
background-image

12 篇文章
{
,

}
文章“移动背景”的直接链接
动画 背景图像 背景位置

移动背景

我们通常认为背景图像只是纹理或提供对比以使内容可读的东西——换句话说,并非真正的内容。如果它确实是内容,您可能希望使用一个<img> 标签,毕竟要考虑可访问性和各种因素。

但是,有些...

Avatar of Saleh Mubashar
Saleh Mubashar 于 2023 年 2 月 9 日 发表
文章“图像插画过滤器”的直接链接
背景图像 混合模式 重复渐变

图像插画过滤器

我喜欢那种效果,让图像看起来像是油画或用厚重的、流淌的墨水钢笔绘制的插画。我在 Scott Vandehey 分享他的 “半色调过滤器”效果 时想到了这个主意...

Avatar of Geoff Graham
Geoff Graham 于 2022 年 9 月 27 日 发表
文章“赞美阴影”的直接链接
背景图像 居中 网格 对象适配 滚动捕捉 堆叠上下文

赞美阴影

我们亲爱的朋友 Robin 有一篇名为赞美阴影 的新文章。现在,在你跳到那里寻找关于 CSS 盒阴影、文本阴影和阴影过滤器的知识点之前... 这篇文章不是那样的。这是一篇...

Avatar of Geoff Graham
Geoff Graham 于 2022 年 7 月 12 日 发表
文章“使用内联图像寻找固定背景效果”的直接链接
背景附件 背景图像 固定定位 图像

使用内联图像寻找固定背景效果

几天前,我在为客户做项目时,想要在<img> 标签上创建一种特定效果。你看,背景图像可以用background-attachment: fixed; 来轻松实现我想要的效果。使用...

Avatar of Alex Lazar
Alex Lazar 于 2022 年 1 月 9 日 发表
文章“也许确实有 background-opacity?”的直接链接
背景图像 透明度

也许确实有 background-opacity?

我在阅读 Jake 的 “交叉淡入淡出任何两个 DOM 元素目前是不可能的” 这篇文章,它深入浅出地讲解了如何才能真正实现元素的交叉淡入淡出。没错,你可以同时对它们的透明度进行动画,但是即使...

Avatar of Chris Coyier
Chris Coyier 于 2021 年 12 月 15 日 发表
文章“使用 background-image 更精细地控制 CSS 边框”的直接链接
背景图像 边框

使用 background-image 更精细地控制 CSS 边框

你可以使典型的 CSS border 成为虚线或点线。例如

.box {
   border: 1px dashed black;
   border: 3px dotted red;
}

你对虚线或间隙的大小或长度没有太多控制。...

Avatar of Chris Coyier
Chris Coyier 于 2020 年 8 月 7 日 发表
文章“如何使用 element() 将文本作为背景图像重复显示在 CSS 中”的直接链接
背景图像 element()

如何使用 element() 将文本作为背景图像重复显示在 CSS 中

我看到一种设计趋势在各处流行。也许你也看到了。就是这种文本反复重复显示的效果。一个很好的例子是价格比较网站 GoCompare,他们使用...

Avatar of Ollie Williams
Ollie Williams 于 2020 年 3 月 26 日 发表
文章“使用 Sass 创建可维护的图标系统”的直接链接
背景图像 图标 Sass Sass 地图 SVG 图标

使用 Sass 创建可维护的图标系统

我最喜欢的一种在网站上添加图标的方法是,将它们作为 数据 URL 背景图像包含到 CSS 中的伪元素(例如 ::after)中。这种技术有几个优点

  • 它们不需要任何额外的 HTTP 请求
...
Avatar of Tracy Rotton
Tracy Rotton 于 2021 年 8 月 3 日 发表
文章“使用自定义属性管理多个背景”的直接链接
背景 背景图像 自定义属性 多个背景

使用自定义属性管理多个背景

CSS 自定义属性的一个很酷的特性是,它们可以是值的一部分。假设你正在使用 多个背景 来实现一种设计。每个背景将有自己的颜色、图像、重复方式、位置等。它...

Avatar of Chris Coyier
Chris Coyier 于 2019 年 7 月 16 日 发表
  • 1
  • 2
  • 更早

CSS-Tricks 由 DigitalOcean 提供技术支持。

关注最新 web 开发资讯

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.